vue-cli 中的模式和环境环境变量（如何在vue-cli 中配置多个不同环境【模式】打包）

最新推荐文章于 2024-01-26 23:45:50 发布

原创最新推荐文章于 2024-01-26 23:45:50 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #webpack

本文详细介绍如何在Vue项目中通过.vue-cli-service build --mode命令行参数指定不同环境模式，如uat，从而加载对应的.env.test环境变量文件。文章解释了如何在.vue.config.js中访问这些环境变量，并说明了只有以VUE_APP_开头的变量才会被静态嵌入到客户端侧包中。

vue-cli 中的模式和环境环境变量（如何在vue-cli 中配置多个不同环境【模式】打包）

1. 首先我们配置不同的模式文件

在根目录下创建如下文件，

.env.test   # 表示在uat 模式下载入该文件

.env.test 的文件内容

FOO = bar
VUE_APP_SECRET=secret

该文件内容时，uat模式下的环境变量

PS. 环境变量可以理解成 cmd 中的PATH, 你在cmd 中输入 PATH就知道了，而.env.test中配置的环境变量，我们可以在vue.config.js 配置一些东西的使用

2. 运行脚手架中的命令并指定模式mode

在pack.json中我来映射一个个自己定义的命令

"build:uat":"vue-cli-service build --mode uat"  # --mode 可以让我们来指定模式，这里你我们指定uat模式

3. 使用我们配置uat模式下，里面的VUE_APP_SECRET变量和FOO 变量

在vue.config.js文件中，我们可以这样来访问

const str = process.env.VUE_APP_SECRET
const str1 = process.env.FOO

# 注意只有以VUE_APP_开头的的变量会被webpack.DefinePlugin 静态嵌入到客户端侧包中。（就是打包后的文件） 可以通过console.log(process.env.VUE_APP_SECRET)
module.exports = {
  // config
}

除了VUE_APP_*，之外，还有连个特殊的变量NODE_ENV=production,通常与mode相同NODE_ENV=UAT。，BASE_URL 基路径 publicPath

更多详情精彩

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