如何在vue-cli项目中更改端口号

Question

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

Answer 1

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

npm run serve -- --port 3000

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

Answer 2

晚些时候参加聚会，但是我认为将所有这些答案合并为一个概述所有选项会有所帮助。

在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文件，较具体的env会覆盖较不具体的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

Answer 3

截至本回答撰写时间（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

请注意，如文档中所述，devServer部分提供了“webpack-dev-server的所有选项”（https://webpack.js.org/configuration/dev-server/）。

Answer 4

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个文件可以更好地从那里设置

Answer 5

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

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

Answer 6

在webpack.config.js：

中

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

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

然后你重新开始npm run dev。你可以得到它。

Answer 7

如果您正在使用vue cli 3，则另一个选择是使用配置文件。使vue.config.js与您的package.json处于同一级别，并进行如下配置：

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

使用脚本进行配置：

npm run serve --port 3000

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

Answer 8

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

如果您确实要使用NodeIP:NodePort，并且您想在vue-cli-service文件中使用端口设置（基本上由“ vue create ”命令创建），则可以使用以下配置：package.json。因此，脚本的整个配置将如下所示：

--port 3000

我在macOS设备上使用... "scripts": { "serve": "vue-cli-service serve --port 3000", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, ... 。

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

Answer 9

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

Answer 10

第一个选项：

打开 package.json 并在“ 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 run serve --port 8090

Answer 11

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

PORT=3000

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

Answer 12

在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    
         }
}

Answer 13

在PORT中的serve脚本中添加package.json变量：

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

Answer 14

这里有很多答案因版本而异，所以我认为从2018年10月使用Vue CLI 开始，我将确认并详细说明上述朱利安·勒·库帕奈克（Julien Le Coupanec）的答案。在这篇文章的最新版本Vue.js中- vue@2.6.10 -在浏览了这篇文章中的一些无数答案之后，下面概述的步骤对我来说是最有意义的。 Vue.js documentation引用了此难题的各个部分，但不够明确。

1. 在Vue.js项目的根目录中打开package.json文件。
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对于某些人可能会派上用场。

Answer 15

For example你也可以直接去 package.json 文件。在“脚本”中编写您自己的脚本，例如： "start" : "npm run serve -- -- 端口 3030" 然后只需在终端“npm start”中写入

Answer 16

转到node_modules/@vue/cli-service/lib/options.js
在“ devServer”内部的底部，取消阻止代码
现在在“端口”中输入所需的端口号：）

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