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


当前回答

如果你使用纱线:

yarn serve --port 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部分中可用。

最好的方法是更新包中的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"
},

将PORT环境变量添加到package.json中的服务脚本中:

"serve": "PORT=4767 vue-cli-service serve",

如果你通过Visual Studio Community或Professional(可能是. net Core项目)运行这个程序,你会发现无论你执行什么步骤,当你启动解决方案时,它都会使用8080。

有发射。Json文件,你需要编辑隐藏在.vscode目录。 MS根本没有告诉你这个,文件搜索似乎也找不到它。

我的天啊!这并不复杂,这些答案也同样有效。然而,这个问题的其他答案也很有效。

如果你真的想使用vue-cli-service,如果你想在你的包中有端口设置。你的'vue create <app-name>'命令基本上创建的Json文件,你可以使用以下配置:所以你脚本的整个配置是这样的:

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

我在macOS设备上使用@vue/cli 4.3.1 (vue——version)。

我还添加了vue-cli-service引用: https://cli.vuejs.org/guide/cli-service.html