本文参考：https://blog.csdn.net/weixin_33840661/article/details/91393068
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
配置环境变量的目的
项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
配置
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
默认文件名：
.env
.env.development
.env.production
.env.test
运行npm run dev的时候会读取.env.development里面的变量，运行npm run build的时候会读取.env.production里面的变量。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：
"dev-build": "vue-cli-service build --mode development",
环境加载属性
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
文件内容
以VUE_APP_开头，例如：VUE_APP_TITLE=My App
访问
通过process.env来访问，例如：process.env.VUE_APP_TITLE // 'My App'
注意：
不能直接写在html标签里面，<div>{{process.env.VUE_APP_TITLE}}</div>，需要通过一个变量来获取，否则会报'process' is not defined。
NODE_ENV 和 BASE_URL
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
NODE_ENV- 会是"development"、"production"或"test"中的一个。具体的值取决于应用运行的模式。BASE_URL- 会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径。
所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。如：<link rel="icon" href="<%= BASE_URL %>favicon.ico">
