react自学(6) 部署到tomcat中

1.设置项目名
在package.json文件配置

"homepage": "/myapp"
1
2.设置Router类型
说明：由于本文是写部署tomcat，因此使用HashRouter类型，不然会出现空白；如果使用springboot或在apche/nginx，则可以使用BrowserRouter。

<HashRouter>
  <div>
    <Route path="/" exact render={(props) => (
      <></>
    )} />
  </div>
</HashRouter>

1
2
3
4
5
6
7
3.使用.env设置自定义的变量
在根目录下(src的同级)，添加.env文件
如想设置变量ROOT_NAME=myapp
在.env中，自定义变量的名称，必须为REACTAPP开头

REACT_APP_ROOT_NAME=myapp
1
4.在代码中获取变量
console.log(process.env.REACT_APP_ROOT_NAME)
console.log(process.env.PUBLIC_URL)
1
2
说明：获取第一步设置的项目名则使用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", // 生产环境
}
}
1
2
3
4
5
6
7
对应执行打包命令：

npm run build
npm run build-dev
npm run build-prod