如何配置Vue环境

---

前言

当我们使用不同模式启动项目时，对应的环境变量也是不一样，如何选择正确的环境变量就是我们需要去解决的问题

---

一、Vue CLI的三种模式

当我们使用 Vue CLI 创建项目时，默认自带了三种模式

提示：但是我创建完项目，并没有找到test模式

二、如何改写当前模式

1. 通过命令行

vue-cli-service build 命令对应的模式为 production，我们可以通过下面的命令，使它的模式变成 development（开发模式）

vue-cli-service build --mode development

2. 通过环境文件

比如，.env.development 文件，专门为development模式准备的
那么我们如何通过文件来改写模式？
只需要在文件中添加 NODE_ENV=production，我们就可以把development模式改成production模式，如果文件中没有添加NODE_ENV，那么模式会取决于命令行执行的模式

简单来说就是，文件中有NODE_ENV的话，就以文件中的模式为主，没有文件或者文件中没有NODE_ENV变量，就以执行的命令行对应的模式为主

提示：环境文件中申明变量，只能如同以下图片

三、定义环境文件中的变量

提示：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量才能被嵌入到代码中

1. NODE_ENV：应用运行的模式
2. BASE_URL：应用部署的基础路径
3. VUE_APP_XXXX：这个我们就可以自行定义了，还要以VUE_APP_开头即可

四、如何使用环境文件中的变量

五、环境文件加载优先级

如果你有专门为环境模式准备的环境文件，会优先选择

比如你有一个.env和.env.development 文件，如果我们启动的命令行对应的模式是development，那么应用会优先选择development文件

---

总结

简单的总结了Vue环境文件的配置，方便自己日后更加快速的了解内容