1.当项目结构为dva架构的时候
(1)安装cross-env
npm i -D cross-env
(2)配置package.json
示例;配置测试环境与生产环境下的本地项目
{
"private": true,
"scripts": {
"start": "cross-env CMDEFINE_ENV=dev roadhog server",
"startp": "cross-env CMDEFINE_ENV=prod roadhog server",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint"
},
"dependencies": {
"cross-env": "^5.2.1",
"dva": "^2.4.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-plugin-dva-hmr": "^0.3.2",
"eslint": "^4.14.0",
"eslint-config-umi": "^0.1.1",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"husky": "^0.12.0",
"redbox-react": "^1.4.3",
"roadhog": "^2.5.0-beta.4"
}
}
(3)新建webpackrc.js,
export default{
entry:'src/index.js',
define:{
'process.env':{
CMDEFINE_ENV:process.env.CMDEFINE_ENV,
}
}
}
因为修改了项目的配置文件,需要重新启动项目才可以看到最新的配置
在index.js中console.log(process.env)
就可以拿到当前最新的环境配置,全局可用
2.当项目结构是react脚手架架构的时候(此时项目配置处于已经弹出)
(1)安装
npm i -D corss-env
(2)配置package.json
"scripts": {
"start": "cross-env CMLINT_ENV=dev node scripts/start.js",
"startProd": "cross-env CMLINT_ENV=prod scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
(3)找到webpack配置文件(env.js)
在函数getClientEnvironment添加当前通过cross-env配置的环境