vue配置多环境打包命令

当我们开发项目时不同环境在打包时还要修改不同的地址才能打包，即使你们公司有自动化部署平台但你每次上传gitee还需要改来改去的

我们对此可以配置不同的打包命令来控制此问题

1，在项目根目录下新建2个文件，.env.dev   .env.pre   若你有多个环境 还可以创建多个文件，

2，在项目的package.json文件中，把scripts对象的build字段的值改为以下代码，实际就是再添加npm run build:dev命令和npm run build:pre命令。

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build --mode prod",

"build:dev": "vue-cli-service build --mode dev",

"build:pre": "vue-cli-service build --mode pre",

"lint": "vue-cli-service lint"

}

3.在.env.dev   .env.pre 文件中定义请求地址变量以及相对静态文件地址的变量，或其他变量

 4.定义的这些变量可以在项目中直接用process.env.变量 获取

例如

if (process.env.NODE_ENV === 'production') { console.log('生产环境'); } 
else if(process.env.NODE_ENV === 'testing') { console.log('测试环境'); } 
else if(process.env.NODE_ENV === 'pre-release') { console.log('预发布环境'); }

5.可以请求拦截器里配置

 6.最后可根据不同环境进行不同命令打包   （npm run dev    npm run pre）