React 打包部署多级目录实践

Posted 2023-03-09

参考技术A

使用 react-create-app 创建项目，想实现打包后部署服务器的 3 级目录，经过多次调试跑通，并记录一下，方便自己后期使用，也方便其他伙伴有相同需求可以参考。

服务端部署后的域名及路由预期：
http://www.demo.com/webapp

本地的项目结构如下，项目目录是： webapp

重点是设置属性：basename = "/webapp"

package.json, 增加配置项： “homepage": "/webapp/dist/"

服务器使用了 Nginx，所有需要配置这里

服务端的目录结构

第一步：Nginx 定位入口文件

第二步：homepage 定位静态资源（.js、.css ……）

第三步：Router 路由的根路径