Laravel环境部署前端框架集成：Vue3与React在Laravel中的配置【教程】-php教程-PHP中文网

推荐采用前后端分离架构：Laravel 作为纯 API 后端提供 RESTful 接口与安全认证，Vue3/React 作为独立前端通过 Vite 构建并代理请求，统一由 Sanctum 处理会话认证，关键权限必须在后端中间件强制校验。

laravel环境部署前端框架集成：vue3与react在laravel中的配置【教程】

在 Laravel 中集成 Vue3 或 React，核心是明确项目结构定位：是“Laravel 内嵌前端”（单体式），还是“前后端分离”（API 服务 + 独立前端）。两种路径配置差异明显，选错会导致跨域、热更新失效、认证异常等问题。下面按实际开发高频场景分步说明。

Vue3 集成：推荐 Vite + Laravel API 模式

现代 Laravel 项目默认使用 Vite，不再依赖 Laravel Mix。这种方式让 Vue3 完全独立运行，开发体验接近纯前端项目。

在 Laravel 根目录执行：npm create vite@latest frontend -- --template vue，新建 frontend/ 目录作为 Vue3 项目
修改 frontend/vite.config.js，设置代理避免开发跨域：
server: { proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true } } }
后端启用 Sanctum cookie 认证：确保 config/sanctum.php 中 'stateful' => ['localhost:5173']（Vite 默认端口）已添加
前端 Axios 配置需开启凭证：axios.defaults.withCredentials = true，并确保请求头携带 X-XSRF-TOKEN（Sanctum 自动注入）

React 集成：同理用 Vite，但注意路由与 SSR 兼容性

React 项目同样建议独立于 Laravel 目录，尤其当未来可能接入 SSR（如 Next.js）或静态托管时。

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

创建 React 项目：npx create-react-app frontend --template typescript 或更轻量的 npm create vite@latest frontend -- --template react
在 frontend/src/setupProxy.js（CRA）或 vite.config.js（Vite）中配置 API 代理到 http://localhost:8000
认证统一走 Sanctum：登录接口返回 session cookie 后，后续请求自动携带；无需手动管理 token
若使用 React Router v6，页面级权限控制可结合 useEffect 调用 /api/user 验证登录态，但关键权限（如编辑、删除）必须由 Laravel 后端中间件（auth:sanctum）强制校验

Laravel UI 脚手架：仅适合快速原型或小团队维护

该方案将 Vue/React 代码直接放在 resources/js/ 下，由 Laravel 的 Vite 构建流程统一编译。优点是部署简单（一个 Nginx 配置即可），缺点是前端生态受限、调试不便。

安装：composer require laravel/ui，然后运行 php artisan ui vue --inertia（推荐 Inertia 版本）或 php artisan ui react
运行 npm install && npm run dev，前端资源会输出到 public/build/
关键点：Inertia 模式下，页面跳转不刷新，由 Laravel 返回 JSON 数据，Vue/React 组件接收并渲染——它模糊了前后端边界，但牺牲了前端框架原生能力（如 SEO、PWA）

跨域与生产部署关键项

无论哪种集成方式，以下配置必须检查：

后端 CORS：安装 fruitcake/laravel-cors，在 app/Http/Kernel.php 的 api 中间件组中启用 HandleCors::class
环境变量：前端通过 VITE_API_BASE_URL 读取 API 地址，避免硬编码；Laravel .env 中设 SESSION_DOMAIN=localhost（本地开发）或对应域名（生产）
生产构建：Vue3/React 运行 npm run build，输出静态文件；Nginx 需同时配置 Laravel 后端（/api/* 转发）和前端静态资源（root /path/to/frontend/dist）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！