vue如何配置研发/测试/生产环境?

我们在vue项目根目录添加以下3个文件:

.env.development    #本地开发环境

.env.test                  #部署测试环境

.env.production       #部署生产环境

#拓展

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

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

环境变量配置规则

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

例如

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

#警告

#不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！

#环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

想要了解解析环境文件规则的细节，请参考 dotenv,

我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。

环境文件加载优先级

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

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

在客户端侧代码中使用环境变量

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

例如

.env.development文件中添加环境变量

NODE_ENV=development   #值为三种中一个 development,test,production

VUE_APP_APP=app

VUE_APP_ROOT_PATH=http://localhost.com/home/index

VUE_APP_API=http://api.localhost.com/api/

最后 你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

其次在package.json  中 “script”:

添加三种命令

vue-cli-service build --mode development 
vue-cli-service build --mode test
vue-cli-service build --mode production

npm run serve 不带--mode默认是 .env.development 中取值.