如何将已完成的React应用集成到Laravel框架（详细步骤）

1. 迁移React文件到Laravel项目 #

• 把你的React项目里的src文件夹完整复制到Laravel项目的resources/js目录下
• 将React项目中的静态资源（比如图片）复制到Laravel的public目录下（后续组件引用时直接用根路径，比如/images/xxx.jpg）

2. 安装必要依赖 #

打开Laravel项目根目录的终端，执行以下命令安装React及样式相关依赖：

npm install react react-dom sass macro-css --save

3. 修正React入口文件的拼写错误 #

打开resources/js/src/index.js，你代码里的creactRoot是拼写错误，修正为createRoot：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import 'macro-css';

// 修正拼写错误
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

4. 配置Vite（Laravel默认前端构建工具） #

打开项目根目录的vite.config.js，修改为以下内容，确保Vite能处理React和SCSS文件：

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

export default defineConfig({
    plugins: [
        laravel({
            // 指定React入口文件
            input: ['resources/js/src/index.js'],
            refresh: true,
        }),
        react(),
    ],
});

5. 修改welcome.blade.php模板 #

打开resources/views/welcome.blade.php，替换原有内容为以下代码，添加React根容器并引入Vite编译资源：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel + React</title>
    <!-- 引入Vite生成的样式和脚本 -->
    @vite(['resources/js/src/index.js'])
</head>
<body>
    <!-- React应用挂载的根容器 -->
    <div id="root"></div>
</body>
</html>

6. 编译并启动项目 #

• 终端运行前端热重载编译命令：

npm run dev

• 另开一个终端启动Laravel服务：

php artisan serve

• 访问http://localhost:8000，即可看到你的React应用正常加载，样式也会生效。

老版本Laravel（使用Mix）适配方案 #

如果你的Laravel版本是8及以下（使用Laravel Mix），修改webpack.mix.js：

const mix = require('laravel-mix');
mix.react('resources/js/src/index.js', 'public/js')
   .sass('resources/js/src/index.scss', 'public/css');

然后在welcome.blade.php中引用编译后的资源：

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<script src="{{ mix('/js/app.js') }}"></script>

执行npm run dev编译即可。

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