如何在Vue-cli项目中更改端口号,使其在另一个端口上运行而不是8080。


当前回答

你应该擅长这个:

“serve”:“vue-cli-service service——port 8081”,

其他回答

进入“node_modules/@vue/cli-service/lib/options.js”目录 在“devServer”的底部,解锁代码 现在在“port”中给出你想要的端口号:)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}

最好的方法是更新包中的serve脚本命令。json文件。只需像这样追加——port 3000:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},

如果您使用vue-cli 3。X,你可以简单地将端口传递给NPM命令,如下所示:

运行服务-- --端口3000

然后访问http://localhost:3000/

在撰写本文时(2018年5月5日),vue-cli的配置托管在<your_project_root>/vue.config.js。要更改端口,请参见以下内容:

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

vue.config.js的完整参考可以在这里找到:https://cli.vuejs.org/config/#global-cli-config

请注意,正如文档中所述,“webpack-dev-server的所有选项”(https://webpack.js.org/configuration/dev-server/)在devServer部分中可用。

在webpack.config.js中:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

您可以在模块中更改端口。exports -> devServer ->端口。

然后你重新启动npm run dev。你可以得到那个。