Vue-cli webpack模板的端口在你的应用根目录myApp/config/index.js中。

你所要做的就是在dev块中修改端口值:

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

现在你可以用localhost:4545访问你的应用了

如果你有。env文件，最好从那里设置

在webpack.config.js中:

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

您可以在模块中更改端口。exports -> devServer ->端口。

然后你重新启动npm run dev。你可以得到那个。

在撰写本文时(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。X，你可以简单地将端口传递给NPM命令，如下所示:

运行服务-- --端口3000

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

如果您正在使用vue cli 3，另一个选择是使用配置文件。创建vue.config.js与你的包在同一级别。Json，并像这样放置配置:

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

使用脚本配置:

npm run serve --port 3000

工作很好，但如果你有更多的配置选项，我喜欢在配置文件中做。你可以在文档中找到更多信息。

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

端口= 3000

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

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

虽然有点晚了，但我认为将所有这些答案整合成一个概述所有选项的答案是有帮助的。

分别在Vue CLI v2 (webpack模板)和Vue CLI v3中，按优先级(从高到低)排序。

Vue CLI v3

package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000 CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000. Environment Variable $PORT, e.g. PORT=3000 npm run serve .env Files, more specific envs override less specific ones, e.g. PORT=3242 vue.config.js, devServer.port, e.g. 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 / 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

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

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

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

这里有很多不同版本的答案，所以我想我应该在2018年10月使用Vue CLI时确认并阐述Julien Le Coupanec的答案。在Vue.js的最新版本(vue@2.6.10)中，在浏览了这篇文章中无数的答案后，下面概述的步骤对我来说最有意义。Vue.js文档引用了这个难题的各个部分，但不是很明确。

打开包裹。Vue.js项目根目录下的Vue.js文件。 在包中搜索“port”。json文件。 在找到以下对“port”的引用后，使用如下所示的相同语法，编辑serve脚本元素以反映所需的端口: "脚本":{ “serve”:“vue-cli-service serve—port 8000”， "build": "vue-cli-service build"， "lint": "vue-cli-service lint" ｝ 确保重新启动npm服务器以避免不必要的疯狂。

文档显示，通过在npm run serve命令的末尾添加——port 8080，可以有效地得到相同的结果，如下所示:我更喜欢编辑这个包。直接编辑NPM run serve——port 1234以避免额外的输入，但是内联编辑NPM run serve——port 1234可能对一些人有用。

进入“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 => {}
}

如果你想改变localhost端口，你可以改变package.json中的scripts标签:

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

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

如果你真的想使用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

第一选择:

打开的包。在“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

要更改端口(NPM)，请转到package.json。在脚本中编写自己的脚本，例如:

"start": "npm run serve --port [PORT YOU WANT]"

之后你可以用npm start开始

如果你使用纱线:

yarn serve --port 3000

如果你想临时改变端口号，你可以在npm run serve命令中添加一个-port选项。

运行服务-- --端口6058

打开package.json 添加名为serve的脚本，"serve": "Vue-cli-service serve -port 8081" NPM运行服务 服务器将运行8081

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

你应该擅长这个:

“serve”:“vue-cli-service service——port 8081”，

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

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