vue-cli模式和环境变量

 

默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve

test 模式用于 vue-cli-service test:unit

production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

环境文件：

当运行vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。

环境文件：

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

如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

 

使用环境变量：

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

console.log(process.env.VUE_APP_SECRET)

· 除了 VUE_ENV 会是 "development"、"production" 或 "test" 中的一个。

· BASE_URL 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

 

只在本地有效的变量：

有的时候，你可能有一些不应该提交到代码仓库的变量尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local 或 .env.xxx.local 文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。

 

小例子：

package.json配置：

运行：npm run dev 时，会开启开发环境，页面中我们可以使用 process.env.VUE_ADD_XXX 来获取 .env.development 文件中的配置。

运行：npm run build 时，会运行生产环境，打包项目， 如果页面中我们可以使用了 process.env.VUE_ADD_XXX， 那么它会去 .env.development 文件中获取配置。