0
点赞
收藏
分享

微信扫一扫

create-react-app 区分环境 环境变量

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;

create-react-app 区分环境 环境变量_跨域_02

 

可以通过修改环境变量配置,控制打包输出目录:

create-react-app 区分环境 环境变量_反向代理_03

create-react-app 区分环境 环境变量_analyzer_04


举报

相关推荐

0 条评论