vue中的端口号如何改修

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端口号的两种常用方式——一个改配置文件，一个改启动命令。实际开发中根据项目脚手架版本灵活选择即可，没有哪种绝对更好，顺手最快。