vue2+webpack环境变量配置

第一步：创建3个环境变量文件

1、创建> 生产（本地）环境 .env.development

# 开发环境
ENV='development'
VUE_APP_MEDIA_BASE='调后端请求的地址'

2、创建> 测试环境 .env.staging

# 测试环境
ENV='staging'
VUE_APP_MEDIA_BASE='调后端请求的地址'

3、创建> 生产（正式）环境 .env.production

# 正式环境
ENV='production'
VUE_APP_MEDIA_BASE='调后端请求的地址'

第二步：在vue.config.js文件中配置

module.exports = {//生产环境使用development的变量lintOnSave: process.env.ENV === 'development',//设置代理proxy: {'/api': {target: process.env.VUE_APP_MEDIA_BASE,changeOrigin: true,}}
}

第三步：配置package.json

//正式环境build指令build:prod
//测试环境build指令build:stage"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging",}

验证是否生效：在main.js或者vue.config.js或者任意组件中打印一下process.env.VUE_APP_MEDIA_BASE，如果获取到就证明验证成功了

注意！！！在文件中配置环境路径，前面必须以VUE_APP开头！！！