Vue工程使用本地环境变量配置

问题

前端直接给我一个前端源代码工程，说是要我在本地运行起来，直接调的接口，后台人员自己调试。好吧，我尝试过程中，遇到需要修改前端环境变量的问题，而且我不想动前端原来的代码和配置，就出现这个故事。

Vue的三种运行模式

• development
• test
• production

这是vue项目运行的三种模式，可以通过环境变量NODE_ENV来指定。

Vue的环境变量配置文件

vue的配置文件主要分为下面4种：

.env                # 任何情况都会启用的配置
.env.local          # 任何情况都会启用的本地配置（不会提交到版本控制当中）
.env.[mode]         # 指定模式下才会启用的配置
.env.[mode].local   # 指定模式下才会启用的本地配置（不会提交到版本控制当中）

解决

根据Vue的3种模式与4种配置的套路，就选择创建来一个.env.development.local的配置文件，然后在这个配置文件写入我想要覆盖的Vue环境变量配置即可，而不用去动前端的源代码了。

参考

• Modes and Environment Variables