vuecli3x4x修改项目启动端口

工作中可能存在启动多个项目的时候，默认端口号会被占，导致启动错误，这种情况下只要把要启动的项目的端口号换掉启动未用的端口就可以了，具体实现如下：

一、vuecli3中的端口文件存放目录为：node_modules/@vue/cli-service/lib/commands/serve.js

打开文件，修改 port 对应的值即可（比如下图中将8080端口改为8088端口）， 然后重新启动项目就可以了。

 

二、新的 vuecli3x4x 项目修改本地端口方法

方式1----在 package.json 文件中修改 scripts 代码如下：

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

ps：关键点在于在 vue-cli-service serve 后面添加 --port 80（端口号，可随意取）

结果如下：

 

 项目已经由默认的 8080 端口改成了我们设置的 80 端口。

 

方式2----在运行项目的时候追加端口号，代码如下：

npm run serve -- --port 80

 

 

 

 ps：运行成功，端口号已经改成了 80，细看你会发现这种方法跟上面的方式1是一样的，因为当执行代码 npm run serve -- --port 80 时，它实际执行的就是 vue-cli-service serve --port 80

 

方式3----修改 vue.config.js 文件（vuecli3x4x脚手架生成的项目不会有 vue.config.js 文件，需要自己在项目根目录下添加 vue.config.js 文件），代码如下：

module.exports = {
  devServer: {
    port: 80
  },
}

 

 项目成功运行在 80 端口上