Vuejs 基础学习教程

（四）构建基础进阶-env文件与环境设置

我们在实际开发中，我们一般会经历项目的开发阶段，测试阶段，和最终上线阶段，每个阶段对于项目代码的需要可能都有所不同，那我们怎么让它在不同阶段呈现不同的效果呢？我们下面看一下环境是不是可以解决这个问题呢？

介绍

正确的配置环境首先我们要认识一下不同配置之间的关系。随便画个图表示一下：

这里说的是最全的的可能，我们可以看到不同的环境有着不同的配置，他们之间还有一些交集，就是他们的公公配置，那么我们思考一下在vue中我们需要怎么处理？

其实很简单，就是在项目的跟目下创建不同的环境变量配置：

如：

.env 表示在所有环境中被载入

.env.local 表示在所有环境中被载入，但是git会自动忽略

.env.[mode] 表示只有指定的模式才会载入

.env.[mode].local 表示只有在指定的模式才会载入，但是会被git自动忽略

比如，我们在本地创建几个环境配置，如下图：

以.env.dev这个文件为例子，看一下这个文件中的环境变量怎么写

在脚本管理配置中加载这种环境模式试一下

马上启动一下看看这种环境是否生效

可以看到这种环境配置事情作用了的。

这里其他的环境我们就不做详细讲解了，基本都八九不离十，这里我需要记录一下我测试的一些小发现，这些环境配置的优先权重是怎么样的呢。直接上干货：.env.[mode].local > .env.[mode] >.env.local >.env .

但是这里说一下，除了环境的配置权重，不同的配置他们会进行合并操作，类似于Object.assign的用法。

我们还可以通过新建配置文件的方式为不同的环境配置不同的变量，但是我们发现.env这种文件好像仅仅支持静态值。那怎么办，这里我想了一下发现可以手动在根目录下创建一个自己的配置文件。

我们还可以直接在vue.config.js中直接注入这些动态地配置，这里可以查阅一下chainWebpack这个属性来修改DefinePlugin的值，我们看一下官网的写法。

maaaquZ.png!mobile

环境的配置和管理对于项目的构建很重要，通过不同的项目配置可以增加灵活性，提高程序的扩展性，也可以帮我们有效的分析和定位不同环境下的运行机制和问题。