【前端-vue环境变量】
vue的环境变量
问题：我们在编写vue项目时候可能会有多个环境，我们在打包的时候可能需要经常修改接口地址，非常麻烦，今天的小知识就是让我们解决这个问题的。
注意：此方案目前只适合vue create创建的项目的，本人主要从事后端，前端都是爱好，有什么不对的欢迎指出和谅解。
vue-cli
1.新建一个空项目
使用vue-cli创建一个空项目
vue create mysite01
启动项目
cd mysite01
npm run serve
npx vue-cli-service serve
2.测试环境变量
修改main.js打印环境变量
import { createApp } from 'vue'
import App from './App.vue'
// 打印环境变量
console.log("env:",process.env)
createApp(App).mount('#app')
输出：
Object { NODE_ENV: "development", BASE_URL: "/" }
此时环境变量中有两个值第一个是NODE_ENV，第二个是BASE_URL。
3.测试传统的环境变量
【注意】首先要明确一个npx vue-cli-service serve --mode <env_mode>，这里的 <env_mode>其实就是.env文件后面的，例如npx vue-cli-service serve --mode production其实就是寻找的.env.production这个环境配置文件
3.1 传统的环境变量模式
在项目的根目录下创建环境变量文件
.env # 默认是development
.env.local # 本地配置并且git不提交
.env.production # 生产模式
我们在创建的这些.env开头的文件中加入以VUE_APP开头的键值对，就可以增加自己的环境变量。
比如我们编辑.env的文件
# .env
VUE_APP_SERVER_HOST = dev.eddyhu.com
此时我们重新加载项目
npx vue-cli-service serve
在浏览器控制台查看env：
Object { NODE_ENV: "development", VUE_APP_SERVER_HOST: "dev.eddyhu.com", BASE_URL: "/" }
为了验证我们.env配置文件默认是development，我们重新启动项目并加上环境变量
npx vue-cli-service serve --mode development
在浏览器控制台查看env：
Object { NODE_ENV: "development", VUE_APP_SERVER_HOST: "dev.eddyhu.com", BASE_URL: "/" }
我们重新编写一个.env.production的文件
# .env
VUE_APP_SERVER_HOST = prod.eddyhu.com
我们以prodction模式启动项目
npx vue-cli-service serve --mode production
在浏览器控制台查看env：
Object { NODE_ENV: "production", VUE_APP_SERVER_HOST: "prod.eddyhu.com", BASE_URL: "/" }
此时发现NODE_ENV和VUE_APP_SERVER_HOST都已经改变了
3.2 多生产环境下的环境变量
此部分都是个人的一些观点
由于生产环境可能又多个服务的情况出现，所以只有一个production是不够的。我们就以两个生产环境来看，在项目根目录下重新创建这两个环境文件
.env.prod01
.env.prod02
分别修改文件:
.env.prod01
VUE_APP_SERVER_HOST = prod01.eddyhu.com
.env.prod02
VUE_APP_SERVER_HOST = prod02.eddyhu.com
此时以prod01启动项目
npx vue-cli-service serve --mode prod01
控制台输出：
Object { NODE_ENV: "development", VUE_APP_SERVER_HOST: "prod01.eddyhu.com", BASE_URL: "/" }
此时以prod02启动项目
npx vue-cli-service serve --mode prod02
控制台输出：
Object { NODE_ENV: "development", VUE_APP_SERVER_HOST: "prod02.eddyhu.com", BASE_URL: "/" }
总结：
此时我们就在项目中根据环境的不通拿到了不通的NODE_ENV和VUE_APP_SERVER_HOST，我们也可以在这里配置每个环境不通的BASE_URL，或者在项目中编写一个env_config.js文件通过哈希的方式根据不同的NODE_ENV和VUE_APP_SERVER_HOST去匹配不通的BASE_URL也可以,这样就实现了环境的隔离！
