hongyangwu

主题

自定义环境变量 ​

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

模式 ​

  • development 模式用于 npm start
  • test 模式用于 npm test
  • production 模式用于 npm run build

创建变量 ​

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

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

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

REACT_APP_AXIOS_URL=https://localhost:3000/api

使用 ​

js
const baseUrl = process.env.REACT_APP_BASE_URL

优先级 ​

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

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

Copyright © 2021-2024 hongyangwu