这里有很多答案因版本而异，所以我想我会从2018年10月开始使用Vue CLI确认并阐述上述朱利安·勒·库帕奈克的答案。在最新版本的Vue.js作为这篇文章的- vue@2.6.10 -下面介绍的步骤通过一些在这个岗位无数答案的寻找之后作出的最有意义的我。该Vue.js文档引用这个难题的作品，但不是很明显。

1. package.json在Vue.js项目的根目录中打开文件。
2. 在package.json文件中搜索“端口” 。

3. 找到以下对“端口”的引用后serve，使用如下所示的相同语法编辑脚本元素以反映所需的端口：

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

4. 确保重新启动npm服务器，以避免不必要的混乱。

该文件显示，一方面可以有效的通过将得到同样的结果--port 8080到年底npm run serve，像这样的命令：npm run serve --port 8080。我更喜欢package.json直接编辑，以避免额外的输入，但是npm run serve --port 1234对于某些人来说，内联编辑可能会派上用场。

vue-cli版本3 的另一种方法是.env在根项目目录（以及package.json）中添加一个包含以下内容的文件：

PORT=3000

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

将PORTenvvariable 添加到您的serve脚本中package.json：

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

晚会晚了，但我认为将所有这些答案汇总为一个概述所有选项会有所帮助。

在Vue CLI v2（Webpack模板）和Vue CLI v3中分开，按优先级（从高到低）排序。

Vue CLI v3

• package.json：向serve脚本添加端口选项：scripts.serve=vue-cli-service serve --port 4000
• CLI选项--port来npm run serve，例如npm run serve -- --port 3000。注意--，这会使port选项传递给npm脚本，而不是传递给npm本身。由于至少为v3.4.1，因此应为例如vue-cli-service serve --port 3000。
• 环境变量$PORT，例如PORT=3000 npm run serve
• .env 文件，较具体的环境会覆盖较不具体的环境，例如 PORT=3242
• vue.config.js，devServer.port如devServer: { port: 9999 }

参考文献：

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2（不建议使用）

• 环境变量$PORT，例如PORT=3000 npm run dev
• /config/index.js： dev.port

参考文献：

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

如果您使用的是vue-cli3.x，则只需将端口传递给npm命令，如下所示：

npm run serve -- --port 3000

然后参观 http://localhost:3000/

在webpack.config.js：

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

您可以在module.exports-> devServer->中更改端口port。

然后，您重新启动npm run dev。你可以得到的。

如果您使用的是vue cli 3，则另一个选择是使用配置文件。做一个vue.config.js在同一水平作为你的package.json，把一个配置，如下所示：

module.exports = {
  devServer: {
    port: 3000
  }
}

使用脚本进行配置：

npm run serve --port 3000

效果很好，但是如果您有更多的配置选项，我喜欢在配置文件中进行。您可以在docs中找到更多信息。

最好的方法是更新package.json文件中的serve脚本命令。只需--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"
},