Vue和React 环境变量

Vue和React 环境变量

一般我们开发的时候有这么几个环境，开发环境（development ）、测试环境（test）、生产(线上)环境（production），而这也就导致了我们在不同的环境情况下，请求数据的地址是不同的，但是我们如果没切换一个环境都修改咱们的代码中的请求地址，这显然是不明智的，因此就了配置环境变量一说

Vue

需要在Vue的脚手架（Vue-CLI）中使用

1. 在根目录下创建下列文件来指定环境变量

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

我们常用的基本上就下面几个，为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

.env.development
.env.production
.env.test

2. 在文件中配置

   一个环境文件只包含环境变量的“键=值”对

FOO=bar
VUE_APP_SECRET=secret
VUE_APP_URL=http://localhost:80