react自学(6) 部署到tomcat中

hello_fracong2024-09-02 15:58

1.设置项目名

在package.json文件配置

go 复制代码

"homepage": "/myapp"

2.设置Router类型

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

html 复制代码

    <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.在代码中获取变量

typescript 复制代码

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

json 复制代码

{
  "scripts": {
    "build": "react-scripts build",// 本地环境
    "build-dev": "REACT_APP_ENV=development react-scripts build", // 开发环境
    "build-prod": "REACT_APP_ENV=production react-scripts build", // 生产环境
  }
}

对应执行打包命令：

bash 复制代码

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