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

Vue-cli Webpack模板的端口位于应用程序根目录中myApp/config/index.js。

您所要做的就是修改块port内的值dev：

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

现在，您可以使用 localhost:4545

另外，如果您有.env更好的文件可以从那里进行设置

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

npm run serve -- --port 3000

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

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

在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

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

如果您使用的是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"
},

在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。你可以得到的。

如果要更改localhost端口，则可以更改package.json中的 scripts标签：

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

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

PORT=3000

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

这里有很多答案因版本而异，所以我想我会从2018年10月开始使用Vue CLI确认并解释以上Julien Le Coupanec的答案。在最新版本的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内联编辑可能对某些人有用。

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

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

哦，我的上帝！这些答案也没有那么复杂，也可以使用。但是，此问题的其他答案也很有效。

如果你真的想使用的vue-cli-service，如果你想在你的端口设置package.json文件，你这“VUE创建<应用程序名称>”命令基本上创建，您可以使用以下配置：--port 3000。因此，脚本的整个配置如下所示：

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

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

我还添加了vue-cli-service参考：https : //cli.vuejs.org/guide/cli-service.html

在我的Visual Studio代码Vue项目中，我必须在/config/index.js中进行设置。在以下位置进行更改：

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}

转到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 => {}
}