vue-cli如何配置项目默认启动端口

---

前言

记录vue-cli 2.x - 4.x的项目默认启动端口配置

一、端口配置

1.vue-cli 2.x配置

打开项目根目录的config文件夹，找到index.js文件，找到如图所示位置：

端口的配置是port这一项，比如我们要将端口修改成3000，可以进行如下操作：

dev: {
	// 项目启动端口之后会变成3000
	port: 3000
}

2.vue-cli 3.x、4.x配置

3.x 与 4.x均可以使用以下方法

• 第一种
  在项目根目录下新建vue.config.js文件，配置如下：

module.exports = {
    devServer: {
    	// 项目启动端口之后会变成3000
        port: 3000
    }
}

-第二种
打开项目node_modules/@vue/cli-service/commands/serve.js文件，位置如图：

找到如图所示位置：

然后就可以修改为自己想要的端口了，如设置为3000端口就是：

const defaults = {
  host: '0.0.0.0',
  // 端口号
  port: 3000,
  https: false
}

注意：如果同时设置了serve.js、vue.config.js最终的启动端口是以vue.config.js内的端口为准。

结语：由于是拿之前的老项目试的，可能会有出入，望大家提出错误哈哈。