小白学 VUE 系列之环境变量和模式

环境变量

在项目下建立如下文件

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

环境变量的“键=值”对:

MODE_ENV=development
FOO=bar
VUE_APP_SECRET=secret

注意:属性名必须以"VUEAPP"开头,比如VUE_APP_XXX

模式

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入

"dev-build": "vue-cli-service build --mode development",

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

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

console.log(process.env.VUE_APP_SECRET)

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。