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

部署到非根目录:

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

修改homepage和BrowserRouter 的basename:

部署到非根目录 可以 在package.json 里的homepage配置。homepage=pubilcPath。
比如:部署在 fund_diag_h5下 ,homepage:“/fund_diag_h5/” 。
homepage在本地开发时,建议还是先去掉,打包时再加上(这里不想手动的话,建议可以用环境变量来只在生产和测试)。
create-react-app v5 打包配置(部署到非根目录)_第1张图片
这样 部署完后,会发现,js,css请求成功了,但页面啥也不显示。
create-react-app v5 打包配置(部署到非根目录)_第2张图片
所以还需要对路由做个处理,给路由也加上前缀,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;

这样配置完后就能看到页面了,修改完需要重新 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

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

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}
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;
  }
);

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

运行 npm run eject配置

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

部署步骤和注意事项(仅我的环境,做个笔记):

我需要部署到 apache tomact 的webapps/fund_diag_h5
create-react-app v5 打包配置(部署到非根目录)_第3张图片
需要注意的是 把build里的文件复制到 fund_diag_h5里(不是把整个build拖进去)。
还需要给 fund_diag_h5 读取权限 一般是755即可(这个步骤,每次重新部署后,都要操作一下)。
我是使用FileZIlla(FileZilla部署前端项目) ,这里面可以鼠标右键=>文件属性
然后输入 755 还需把递归子目录选上。
create-react-app v5 打包配置(部署到非根目录)_第4张图片
当然也可以用命令行来:
要将 Tomcat 目录权限设置为 755,你需要在操作系统中使用适当的命令来更改目录的权限。下面是在 Linux 或 macOS 操作系统中设置 Tomcat 目录权限为 755 的步骤:
打开终端或命令行界面。

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

cd /path/to/tomcat

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

chmod 755 .

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

<web-app>
  
  <error-page>
    <error-code>404error-code>
    <location>/your-app-name/index.htmllocation>
  error-page>
web-app>

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

你可能感兴趣的:(v5,React,1024程序员节)