在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的配置参数？就需要引入环境的概念。

一般一个项目都会有以下 3 种环境：

作为开发，我们需要针对每一种环境编写一些不同的代码并且保证这些代码运行在正确的环境中，那么我们应该如何在代码中判断项目所处的环境同时执行不同的代码呢？这就需要我们进行正确的环境配置和管理。

首先开始我们需要知道个个环境变量文件之间的关系：

我们从上图中可以了解到每一个环境其实有其不同的配置，同时它们也存在着交集部分，交集便是它们都共有的配置项，那么在 Vue 中我们应该如何处理呢？ 根目录下创建以下形式的文件进行不同环境下变量的配置：

创建一个名为 .env.stage 的文件，该文件表明其只在 stage 环境下被加载，在这个文件中，我们可以配置如下键值对的变量：

在项目中，我们该如何使用该配置的变量值？很简单，使用 process.env.[name] 进行访问就可以了，比如：

这里输出‘development’ 其实我们期望输出的是‘stage’，原因是 vue-cli-service serve 命令默认设置的环境是 development 我们希望输出为stage 就需要对package.json 中的 serve 脚本的命令进行修改

--mode stage 其实就是修改了 webpack 4 中的 mode 配置项为 stage，同时其会读取对应 .env.stage 文件下的配置，如果没找到对应配置文件，其会使用默认环境 development，同样 vue-cli-service build 会使用默认环境 production。

但这时候如果你创建一个 .env 的文件，再次配置重复的变量，但是值不同，如：

NODE_ENV=staging VUE_APP_TITLE=staging mode VUE_APP_NAME=project

因为 .env 文件会被所有环境加载，即公共配置，那么最终我们运行 vue-cli-service serve 打印出来的stage，但是如果是 .env.stage.local 文件中配置成上方这样，打印出来的是 staging，

所以 .env.[mode].local 会覆盖 .env.[mode] 下的相同配置。同理 .env.local 会覆盖 .env 下的相同配置。

由此可以得出结论，相同配置项的权重：

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

通过上述配置文件的创建，我们成功使用命令行的形式对项目环境进行了设置并可以自由切换 但是需要注意的是我们在 Vue 的前端代码中打印出的 process.env 与 vue.config.js 中输出的可能是不一样的，这需要普及一个知识点：webpack 通过 DefinePlugin 内置插件将 process.env 注入到客户端代码中。

因为vue-cli 3.x 封装的 webpack 配置中已经帮我们完成了这个功能，所以我们可以直接在客户端代码中打印出 process.env 的值，该对象可以包含多个键值对，也就是说可以注入多个值，但是经过 CLI 封装后仅支持注入环境配置文件中以 VUE_APP_ 开头的变量，而 NODE_ENV 和 BASE_URL 这两个特殊变量除外。

也就是说：我们在vue脚手架中使用环境变量的时候，必须以前缀“ VUE_APP_ ” 开头，才能成功获取

我们对.env.stage 进行配置

在 vue.config.js 中打印 process.env，终端输出：

在main.js中打印，终端输出：

可见注入时过滤调了非 VUE_APP_ 开头的变量，其中多出的 BASE_URL 为你在 vue.config.js 设置的值，默认为 /，其在环境配置文件中设置无效。