vue-cli版本3的另一种方法是在根项目目录中添加一个.env文件(与package.json一起)，内容如下:

端口= 3000

运行npm run serve现在将指示应用程序在端口3000上运行。

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

运行服务-- --端口3000

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

第一选择:

打开的包。在“serve”部分中添加“——port port-no”。

就像下面，我已经做到了。

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

第二个选项:如果你想通过命令提示符

运行NPM服务——端口8090

在撰写本文时(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部分中可用。

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

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

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