如何使用vue-cli3实现环境变量配置和不同环境打包的复杂需求？

本文共计1188个文字，预计阅读时间需要5分钟。

第一步：了解环境变量概念我们可以通过查看目录下的`.env`文件来指定环境变量。

第一步 : 了解环境变量概念

我们可以根目录中的下列文件来指定环境变量:

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

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

FOO=bar VUE_APP_SECRET=secret // 只有VUE_APP_开头的环境变量可以在项目代码中直接使用

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

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

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