小开

最佳答案

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

你所要做的就是修改dev块中的port值:

 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
},
......
}

可以修改“module.exports -> devServer -> port. conf”文件中的端口。

然后重新启动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命令，就像这样:

npm run serve -- --port 3000

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

小开

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

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

使用脚本配置:

npm run serve --port 3000

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

小开

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

PORT=3000

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

小开

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

小开

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

分别在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。注意--，这使得将端口选项传递给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 }

引用:

Vue CLI v2(已弃用)

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

引用:

< a href = " http://vuejs-templates.github。io / webpack noreferrer“rel = > 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脚本中:

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

小开

这里有很多不同版本的答案，所以我想我要确认并阐述朱利安·勒·库帕内克在2018年10月的答案使用Vue CLI时。在Vue.js的最新版本——vue@2.6.10——在浏览了这篇文章中无数的答案后，下面概述的步骤对我来说最有意义。Vue.js文档引用了这个谜题的各个部分，但不是很明确。

打开Vue.js项目根目录下的package.json文件。
在package.json文件中搜索“port”。

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

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

Make sure to re-start the npm server to avoid unnecessary insanity.

The documentation shows that one can effectively get the same result by adding --port 8080 to the end of the npm run serve command like so: npm run serve --port 8080. I preferred editing the package.json directly to avoid extra typing, but editing npm run serve --port 1234 inline may come in handy for some.

小开

进入“node_modules/@vue/cli-service/lib/options.js
.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，如果你想在你的package.json文件中设置端口，你的'vue create <app-name>'命令基本上创建了这个文件，你可以使用以下配置:所以你脚本的整个配置是这样的:

...
"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 < / p >

小开

< >强第一选择:< / >强

打开package.json并在“serve"部分中添加“——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

小开

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

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

之后你可以从npm start开始

" scripts

小开

如果你使用yarn:

yarn serve --port 3000

小开

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

运行服务-- --端口6058

小开

打开package.json
添加名为serve， "serve": "Vue-cli-service serve --port 8081"的脚本

npm run serve

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

小开

你应该擅长这个:

“服务”:“服务——港口8081”，

小开

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

在.vscode目录中有一个你需要编辑的launch.json文件。 MS根本没有告诉你这个，文件搜索似乎也找不到它

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

Vue CLI v3

Vue CLI v2(已弃用)