React项目将public文件夹index.html转index.php且不破坏结构的方法

直接重命名index.html为index.php会导致资源路径错误、React打包逻辑冲突等问题，以下是不破坏原有React结构的解决方案：

1. 在public目录新建index.php（保留原index.html） #

不要直接修改原index.html，而是在public文件夹下新建index.php，将原index.html的内容完整复制进去，然后在需要加载数据的位置插入PHP逻辑。例如，把后端数据注入为全局JS变量供React读取：

<?php
// 这里写你的数据获取逻辑，比如从数据库、API读取
$appInitialData = [
    'siteTitle' => 'My React App',
    'userInfo' => ['name' => 'Guest']
];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="React App with PHP data" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title><?php echo $appInitialData['siteTitle']; ?></title>
</head>
<body>
    <noscript>需要启用JavaScript才能运行此应用。</noscript>
    <div id="root"></div>
    <!-- 将PHP数据转为全局JS变量，React组件中可直接通过window.appInitialData访问 -->
    <script>
        window.appInitialData = <?php echo json_encode($appInitialData, JSON_UNESCAPED_UNICODE); ?>;
    </script>
</body>
</html>

2. 配置React打包路径 #

在项目根目录的package.json中添加"homepage": "."，确保打包后的静态资源使用相对路径，避免Hostinger服务器上出现404错误：

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": ".",
  // 其他原有配置...
}

3. 打包React项目 #

运行打包命令生成生产环境文件：

npm run build

打包完成后，build文件夹中会包含原静态资源和新建的index.php。

4. Hostinger部署与配置 #

• 将build文件夹内的所有文件（包括index.php、静态资源、js/css文件）上传到Hostinger的public_html目录。
• 配置.htaccess文件（如果没有则新建），添加单页应用路由重写规则，确保React前端路由能正常工作：

Options -MultiViews
RewriteEngine On
# 排除实际存在的文件/目录，避免静态资源被重写
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 所有非文件/目录的请求都指向index.php
RewriteRule ^ index.php [L]

常见错误排查 #

• 资源加载失败：检查package.json是否添加了homepage: "."，确保打包后的资源路径为相对路径。
• PHP语法错误：检查index.php中的PHP代码，比如json_encode的参数是否合法，避免语法报错。
• 前端路由404：确认.htaccess规则是否正确，Hostinger的Apache服务器是否启用了Rewrite模块（共享主机一般默认开启）。

内容的提问来源于stack exchange，提问作者gee