hongyangwu

主题

自定义环境变量 ​

在某些时候，开发环境和生产环境的某些变量应该是不同的，如 url 的请求前缀，则如何让系统自动区分？

模式 ​

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

可以在 package.json 中创建覆写模式，或创建自定义的模式

js
// 在构建命令中使用开发环境变量
vue-cli-service build --mode development

// 在构建命令中使用 Staging 模式
vue-cli-service build --mode staging

创建变量 ​

在项目根目录中放置下列文件来指定环境变量

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

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会被嵌入到客户端侧的代码

VUE_APP_AXIOS_URL=https://localhost:3000/api

使用 ​

js
const baseUrl = process.env.VUE_APP_BASE_URL

优先级 ​

.env.[mode].local > .env.[mode] > .env

如果 .env.[mode] 是公共仓库的变量，当自己本地需要使用不同的变量时，可以用 .env.[mode].local，优先级被 .env.[mode] 高，且不会被上传到公共仓库

Copyright © 2021-2024 hongyangwu