vue-cli项目修改端口号的方法
How to change port number in vue-cli project
如何更改 Vue-cli 项目中的端口号,使其运行位于另一个端口而不是 8080。
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
中更改端口。
然后你重新定义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
效果很好,但如果您有更多配置选项,我喜欢在配置文件中进行。您可以在 docs 中找到更多信息。
vue-cli
版本 3 的另一种方法是在项目根目录(package.json
旁边)添加一个 .env
文件,其内容为:
PORT=3000
运行 npm run serve
现在将指示该应用程序 运行 在端口 3000 上。
最好的方法是更新 package.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
: 添加端口选项到 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 }
参考文献:
- 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
参考文献:
在我的 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",
这里有很多答案因版本而异,所以我想我会确认并阐述 Julien Le Coupanec 在 2018 年 10 月使用 Vue CLI 时的回答。在 Vue.js 的最新版本 post - vue@2.6.10 - 在浏览了一些内容后,下面概述的步骤对我来说最有意义post 中的无数答案。 Vue.js documentation 引用了这个拼图的一部分,但不是很明确。
- 打开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"
}
确保重新启动 npm
服务器以避免不必要的混乱。
文档显示,通过将 --port 8080
添加到 npm run serve
命令的末尾,可以有效地获得相同的结果,如下所示:npm run serve --port 8080
。我更喜欢直接编辑 package.json
以避免额外输入,但编辑 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 => {}
}
如果要更改本地主机端口,可以在 package.json:
中更改脚本标签
"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>' 命令基本上创建,你可以使用以下配置:--port 3000
。所以你的脚本的整个配置是这样的:
...
"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
第一个选项:
打开 package.json 并在 中添加 "--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
要更改端口 (NPM),请转至 package.json
。在scripts
中编写自己的脚本,例如:
"start": "npm run serve --port [PORT YOU WANT]"
之后你可以从npm start
开始
如果你使用yarn
:
yarn serve --port 3000
如果你想临时更改端口号,可以在npm 运行 serve命令中添加一个–port选项。
npm 运行 服务 -- --端口 6058
如何更改 Vue-cli 项目中的端口号,使其运行位于另一个端口而不是 8080。
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
中更改端口。
然后你重新定义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
效果很好,但如果您有更多配置选项,我喜欢在配置文件中进行。您可以在 docs 中找到更多信息。
vue-cli
版本 3 的另一种方法是在项目根目录(package.json
旁边)添加一个 .env
文件,其内容为:
PORT=3000
运行 npm run serve
现在将指示该应用程序 运行 在端口 3000 上。
最好的方法是更新 package.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
: 添加端口选项到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 }
参考文献:
- 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
参考文献:
在我的 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",
这里有很多答案因版本而异,所以我想我会确认并阐述 Julien Le Coupanec 在 2018 年 10 月使用 Vue CLI 时的回答。在 Vue.js 的最新版本 post - vue@2.6.10 - 在浏览了一些内容后,下面概述的步骤对我来说最有意义post 中的无数答案。 Vue.js documentation 引用了这个拼图的一部分,但不是很明确。
- 打开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" }
确保重新启动
npm
服务器以避免不必要的混乱。
文档显示,通过将 --port 8080
添加到 npm run serve
命令的末尾,可以有效地获得相同的结果,如下所示:npm run serve --port 8080
。我更喜欢直接编辑 package.json
以避免额外输入,但编辑 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 => {}
}
如果要更改本地主机端口,可以在 package.json:
中更改脚本标签 "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>' 命令基本上创建,你可以使用以下配置:--port 3000
。所以你的脚本的整个配置是这样的:
...
"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
第一个选项:
打开 package.json 并在 中添加 "--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
要更改端口 (NPM),请转至 package.json
。在scripts
中编写自己的脚本,例如:
"start": "npm run serve --port [PORT YOU WANT]"
之后你可以从npm start
如果你使用yarn
:
yarn serve --port 3000
如果你想临时更改端口号,可以在npm 运行 serve命令中添加一个–port选项。
npm 运行 服务 -- --端口 6058