在项目根目录新建3个文件 分别为.env、.env.production、.env.development文件：
.env 无论什么环境都会加载(一般用于本地开发)
.env.development测试开发环境加载
.env.production 生产环境加载
我们下面的例子分开来写只用.env、.env.production、.env.development。
.env文件
NODE_ENV = local VUE_APP_URL = 'http://127.0.0.1/api' //自定义变量 必须要以VUE_APP_开头定义
.env.development文件
NODE_ENV = development VUE_APP_URL = 'http://alpha-test.shuzhiqiang.com/api' //自定义变量 必须要以VUE_APP_开头定义
.env.production文件
NODE_ENV = production VUE_APP_URL = 'http://prod.shuzhiqiang.com/api' //自定义变量 必须要以VUE_APP_开头定义
然后配置package.json
{ "name": "你挚爱的强哥", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", //【测试环境】 //--mode 后面需要对用文件的名字.env.development 重点是要和.env.后面的名字对应起来 "build-development": "vue-cli-service build --mode development", //【生产环境】 //--mode 后面需要对用文件的名字.env.production 重点是要和.env.后面的名字对应起来 "build-production": "vue-cli-service build --mode production", "lint": "vue-cli-service lint" }, ... }
接下来，我们在app.vue中打印一下我们设置的这个VUE_APP_URL
//注意：一定要在mounted里面才能打印出来，毕竟.env是外部配置文件，加载需要时间的~ mounted() { console.log(process.env,'环境变量全局') console.log(process.env.VUE_APP_URL, "生产环境VUE_APP_URL"); }
