vue怎么引入环境变量_vue-cli3.0入门-环境变量和模式配置（二）

我们在开发项目过程中，正常情况下会有本地开发环境，测试线环境，线上正式线环境等，当然不同公司会有点差别，具体情况具体玩吧，不同环境的配置会有所不同，比如我们服务器地址，接口地址等等。所以我们要区分，那就需要我们配置境变量和模式，来管理。

关于环境变量的配置，在此，自己也是简单做一下笔记，只为方便以后查看，虽然官方有文档：部分内容也会拿过来记录，下面是自己之前配置的一些笔记整理。

一、环境变量的四种方式

在官方文档中，CLI3.0有四种方式来指定环境变量：

.env # 在所有的环境中被载入

.env.local # 在所有的环境中被载入，但会被 git 忽略

.env.[mode] # 只在指定的模式中被载入

.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

官方文档：

看官方上的说明，意思就是：不同的文件会在不同环境中被载入，比如我们这样写：

.env # 会在所有的环境中被载入

.env.local # 会在所有环境中载入，但只限于本地，不会被git跟踪，git会忽略掉它

.env.development # 只在开发环境中被载入

.env.production # 只在生产环境中被载入

.env.development.local # 会在本地开发环境中载入，不会被git跟踪，git会忽略掉它

这些环境变量都是在项目根目录下建立的，如果写有变量，那么我们运行相关命令的时候，会根据不同环境载入不同的文件，以至于能正确读到文件里的变量。载入的优先级别是：

.env.[mode].local > .env.[mode] > .env

因为：为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

二、模式

默认情况下，一个 Vue CLI 项目有三个模式:

development #模式用于 vue-cli-service serve

production #模式用于 vue-cli-service build 和 vue-cl