vue中的端口号如何改修
作者:BlueNight
时间:2026-07-23
浏览:5
修改Vue项目端口号有两种常用方法:一是在项目根目录的vue.config.js或webpack.config.js中,配置devServer下的port属性来指定端口;二是在package.json的scripts中,为serve或dev命令添加--port参数后跟端口号。修改后需重新启动项目才能生效,且注意端口号必须未被占用。
本文目录
vue端口号改修
在Vue开发中,修改端口号是个很常见的需求——本地调试时总想固定一个端口,或者避免冲突。今天直接上干货,两种最实用的方法,按需取用就行。
方法一
直接在项目根目录的配置文件里搞定。如果是基于webpack的旧项目,找到webpack.config.js;如果是Vue CLI 3+的新项目,则是vue.config.js。在devServer对象里配置host和port即可:
module.exports = {
devServer: {
host: 'localhost',
port: 9000, // 端口
}
}
改完保存,重启项目就能生效。
方法二
如果不想动配置文件,也可以在package.json的scripts里直接指定端口。注意区分项目版本:
- 用Vue CLI 3+创建的项目,在
serve脚本的值后面加上--port 9000。 - 用Vue CLI 2创建的项目,则在
dev脚本的值后面加上同样的参数。
具体写法如下:
"serve": "vue-cli-service serve --port 9000",
配置完成后,重新运行项目,端口就会变成你指定的值。

总结
以上就是修改Vue端口号的两种常用方式——一个改配置文件,一个改启动命令。实际开发中根据项目脚手架版本灵活选择即可,没有哪种绝对更好,顺手最快。
作者最新文章
blender贴图文件在哪里查找与打开教程
2026-10-11 09:08
3ds Max动画播放卡顿或渲染跳帧的解决方法
2026-10-02 17:00
联发科天玑9600 Pro首发2nm:能效与游戏渲染技术详解
2026-09-08 16:54
python代码大全:把常用代码片段整理成可维护的工具箱
2026-09-03 17:05
Excel基础操作指南:数据录入、格式设置、公式应用与打印预览
2026-09-02 12:47
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多










































