create-react-app 区分环境 环境变量
config.js
const baseURL = {
// 使用反向代理解决跨域时,dev应为空字符串
dev: '',
test: 'http://abc.cn',
// 使用yarn build打包,所有接口使用这个url,需要服务器解决跨域
prod: 'http://abc.cn'
}[process.env.REACT_APP_MODE]
const imageBaseUrl = {
dev: 'http://abc.cn/',
test: 'http://abc.work/',
prod: 'http://abc.cn/',
}[process.env.REACT_APP_MODE]
const nodeBaseURL = {
dev: '',
test: 'https://efficacious-tiny-infinity.glitch.me',
prod: 'https://efficacious-tiny-infinity.glitch.me',
}[process.env.REACT_APP_MODE]
export { baseURL, imageBaseUrl, nodeBaseURL }
.env:
// .env
NODE_ENV=development
REACT_APP_MODE=dev
.env.prod:
// .env.prod
NODE_ENV=production
REACT_APP_MODE=prod
BUILD_PATH= /zlhx-ui
.env.test:
// .env.test
NODE_ENV=production
REACT_APP_MODE=test
package.json:
"scripts": {
"start": "node scripts/start.js",
"build_test": "cross-env MODE_ENV=test GENERATE_SOURCEMAP=false GENERATE_BUNDLE_ANALYZER_REPORT=true node scripts/build.js",
"build": "cross-env MODE_ENV=prod GENERATE_SOURCEMAP=false node scripts/build.js",
"test": "node scripts/test.js"
},
修改config/env.js文件:
// const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.MODE_ENV || process.env.NODE_ENV;
可以通过修改环境变量配置,控制打包输出目录:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步