如何在现有Laravel站点的子路径部署已构建的React应用？

一、修复当前白屏问题 #

1. 配置React项目基础路径 #

在React项目根目录的package.json中添加homepage字段，指定部署的子路径：

{
  "name": "alphabets",
  "homepage": "/react/alphabets/",
  // 保留原有其他配置
}

添加完成后重新执行npm run build，此时build目录内的静态资源引用路径会自动适配子路径，不再从站点根目录加载。

2. 调整服务器部署路径 #

你之前将build目录上传到了服务器的public/react/alphabets/build，导致实际访问路径为/react/alphabets/build，与预期不符。正确操作是：

• 将本地build目录下的所有文件（包括index.html、static文件夹等）直接上传到服务器的public/react/alphabets目录下，不要嵌套额外的build子目录。

3. 路由适配（若使用React Router） #

如果你的React应用用到了路由，需要给路由组件添加basename属性匹配子路径：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/react/alphabets">
      {/* 你的路由内容 */}
    </BrowserRouter>
  );
}

4. 检查文件权限 #

确保服务器上public/react/alphabets目录及内部文件的权限允许Web服务器读取：

# 设置目录权限
chmod 755 /path/to/laravel/public/react/alphabets
# 设置文件权限
chmod 644 /path/to/laravel/public/react/alphabets/*
chmod 644 /path/to/laravel/public/react/alphabets/static/**/*

二、多React应用子路径部署通用方案 #

要在mysite/react/first-project、mysite/react/second-project这类子路径部署多个React应用且不干扰主Laravel站点，遵循以下规则：

• 单独配置基础路径：每个React项目的package.json中设置对应子路径的homepage，比如第一个项目设为"/react/first-project/"，第二个设为"/react/second-project/"。
• 独立部署目录：每个项目build后，将build目录下的所有文件上传到Laravel public目录对应的子路径，比如public/react/first-project、public/react/second-project。
• 路由单独适配：每个带路由的React项目，在Router组件中设置对应子路径的basename。
• 避免路径冲突：确保各React应用的子路径唯一，且不与Laravel主站点的路由路径重复——Laravel会优先处理自身路由，静态资源请求直接指向public目录下的文件，不会影响主站点运行。

内容的提问来源于stack exchange，提问作者code-8