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 忽略