vue根据环境不同配置不同的打包命令(史上最简单)

前提:各种vue环境已经配置完毕,vue-cli脚手架安装好。
1.在项目根目录创建如下图所示三个文件,分别取名为 .env.development .env.production .env.test
在这里插入图片描述
2.然后在这三个文件里依次写入如下内容:

NODE_ENV = ‘development’
VUE_APP_CURENV = ‘development’

NODE_ENV = ‘production’
VUE_APP_CURENV = ‘production’

NODE_ENV = ‘test’
VUE_APP_CURENV = ‘test’

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.在项目vue.config.js文件里添加如下代码(没有vue.config.js的可以手动在项目根目录创建)

switch(process.env.VUE_APP_CURENV){
case ‘development’:
console.log(‘当前运行环境为:开发环境’)
break;
case ‘test’:
console.log(‘当前运行环境为:测试环境’)
break;
case ‘production’:
console.log(‘当前运行环境为:生产环境’)
break;
}

在这里插入图片描述
4.在项目api.js里添加如下代码(api.js为项目中封装axios文件,可以根据自己实际封装情况而定;其中comUrl为公共接口地址,可根据自己项目实际情况而定)

switch(process.env.VUE_APP_CURENV){
case ‘development’:
comUrl = ‘http://localhost:3333’;
break;
case ‘test’:
comUrl = ‘http://localhost:5555’;
break;
case ‘production’:
comUrl = ‘http://localhost:6666’;
break;
}

在这里插入图片描述
5.打开package.json文件,修改打包命令如下图
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
“lint”: “vue-cli-service lint”
},

在这里插入图片描述
至此我们的项目已经配置完毕了,然后可以通过npm run serve启动项目,npm run build 打包项目(生产环境)npm run build:test 打包项目(测试环境)
在这里插入图片描述
在这里插入图片描述 PS:可以仿照上面配置配置其他各种环境例如培训环境等等。