create-react-app v5 打包配置(部署到非根目录)

部署到非根目录：

部署到非根目录就需要配置 publicPath和base。
publicPath: 用于指定构建后静态资源在服务器上的路径。
base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。

修改homepage和BrowserRouter 的basename：

部署到非根目录 可以 在package.json 里的homepage配置。homepage=pubilcPath。
比如：部署在 fund_diag_h5下 ，homepage:“/fund_diag_h5/” 。

这样 部署完后，会发现，js,css请求成功了，但页面啥也不显示。

所以还需要对路由做个处理,给路由也加上前缀，BrowserRouter 有个basename属性，这个可以控制路由前缀。
我的App.js 路由配置如下（重点是看BrowserRouter 的basename，其他的你可以忽略）：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import routes from './routes.js';
const App = () => {
  console.log(routes)
  return (
    <BrowserRouter basename="/fund_diag_h5">
      <Routes>
        {routes.map((route) => (
          <Route key={route.path} path={route.path} element={route.component}/>
        ))}
        {/* } />  */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这样配置完后就能看到页面了，修改完需要重新 build才行。basename打包时才用加上，不打包时，就需要去掉，否则本地就看不到页面了（这个可以手动控制也可以根据环境变量来控制）。

如果你的路由模式不是BrowserRouter 则不用处理 basename属性（MemoryRouter、HashRouter不用处理）。

具体路由模式的区别和优缺点可以看：
react create-react-app v5 配置路由(报错及注意事项)

使用customize-cra 和react-app-rewired 配置（不暴露 eject）：

npm install react-app-rewired customize-cra-5 --save-dev
1

然后 package.json里的scripts需要修改成：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}
1
2
3
4
5
6

const { override } = require('customize-cra');
module.exports = override(
  (config) => {
    // 设置 publicPath
    config.output.publicPath = '/your-custom-public-path/';
    // 设置 base
    config.devServer.historyApiFallback = {
      ...config.devServer.historyApiFallback,
      index: '/your-custom-public-path/index.html',
    };
    
    return config;
  }
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

修改完配置需要重新start 和build(如果需要打包的话)。

运行 npm run eject配置

其实运行完后，就跟普通 webpack配置一样了，直接按照webpack 配置 publicPath和base就行。

部署步骤和注意事项（仅我的环境，做个笔记）：

我需要部署到 apache tomact 的webapps/fund_diag_h5

需要注意的是 把build里的文件复制到 fund_diag_h5里（不是把整个build拖进去）。
还需要给 fund_diag_h5 读取权限 一般是755即可（这个步骤，每次重新部署后，都要操作一下）。
我是使用FileZIlla(FileZilla部署前端项目) ，这里面可以鼠标右键=>文件属性
然后输入 755 还需把递归子目录选上。

当然也可以用命令行来:
要将 Tomcat 目录权限设置为 755，你需要在操作系统中使用适当的命令来更改目录的权限。下面是在 Linux 或 macOS 操作系统中设置 Tomcat 目录权限为 755 的步骤：
打开终端或命令行界面。

使用 cd 命令进入 Tomcat 的安装目录。例如：

cd /path/to/tomcat
1

使用 chmod 命令更改目录权限。对于目录的权限设置，755 表示所有者具有读写执行权限，组用户和其他用户具有读执行权限。命令如下：

chmod 755 .
1

注意：BrowserRouter 是不带井号的，所以 部署时后端需要 配合一下 比如：重定向到 index.html
具体配置，建议自行查阅。
比如：在Tomcat的web.xml文件中添加以下配置，以将所有请求重定向到应用程序的入口文件上：

<web-app>
  
  <error-page>
    <error-code>404error-code>
    <location>/your-app-name/index.htmllocation>
  error-page>
web-app>
1
2
3
4
5
6
7

具体配置axios和注意事项 可以参考：react create-react-app v5 配置路由(报错及注意事项)