1.设置项目名
在package.json文件配置
"homepage": "/myapp"
2.设置Router类型
说明:由于本文是写部署tomcat,因此使用HashRouter类型,不然会出现空白;如果使用springboot或在apche/nginx,则可以使用BrowserRouter。
<HashRouter>
<div>
<Route path="/" exact render={(props) => (
<></>
)} />
</div>
</HashRouter>
3.使用.env设置自定义的变量
在根目录下(src的同级),添加.env文件
如想设置变量ROOT_NAME=myapp
在.env中,自定义变量的名称,必须为REACT_APP_
开头
REACT_APP_ROOT_NAME=myapp
4.在代码中获取变量
console.log(process.env.REACT_APP_ROOT_NAME)
console.log(process.env.PUBLIC_URL)
说明:获取第一步设置的项目名则使用process.env.REACT_APP_ROOT_NAME
,process.env.PUBLIC_URL
5.多环境配置打包命令
环境变量文件命名规则:.env.[环境名称]
如:
本地环境配置文件:.env
开发环境配置文件:.env.development
生产环境配置文件:.env.production
{
"scripts": {
"build": "react-scripts build",// 本地环境
"build-dev": "REACT_APP_ENV=development react-scripts build", // 开发环境
"build-prod": "REACT_APP_ENV=production react-scripts build", // 生产环境
}
}
对应执行打包命令:
npm run build
npm run build-dev
npm run build-prod