如何修改React构建配置生成支持PHP变量注入的纯HTML模板

AI 小北

2026-10-2

可行方案说明

完全可以通过调整构建配置实现输出带完整DOM结构的纯HTML文件，核心思路是引入预渲染能力，在构建阶段就把React组件渲染成静态DOM写入HTML文件，而非等到客户端运行JS再渲染。

基于Create React App（CRA）的项目配置

优先用react-snap零成本接入：

安装依赖：npm install --save-dev react-snap
给package.json新增postbuild钩子：

{
  "scripts": {
    "build": "react-scripts build",
    "postbuild": "react-snap"
  }
}

修改src/index.js的渲染逻辑，兼容预渲染后的hydrate模式：

import React from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import App from './App';

const rootNode = document.getElementById('root');
if (rootNode.children.length) {
  hydrateRoot(rootNode, <App />);
} else {
  createRoot(rootNode).render(<App />);
}

执行npm run build，构建产物的index.html会直接包含完整的表单DOM结构。

基于Vite的项目配置

安装vite-plugin-prerender插件，在vite.config.js中配置需要预渲染的路由即可，示例配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import prerender from 'vite-plugin-prerender';

export default defineConfig({
  plugins: [
    react(),
    prerender({
      routes: ['/'], // 你的表单页路由
    })
  ]
});

构建后自动生成带完整DOM的HTML文件。

适配PHP变量插入的注意事项

可以先在React代码中用唯一占位符（比如{{__PHP_FORM_TITLE__}}）标记需要插入PHP变量的位置，构建完成后全局替换占位符为对应的PHP变量（比如<?php echo $form_title; ?>）即可，不需要改动预渲染逻辑。
多步表单的交互逻辑仍然保留在JS文件中，不会因为预渲染受到影响。