Laravel怎么引入Vite编译_Laravel如何管理前端资源【教程】-Laravel-PHP中文网

vite 在 laravel 中需替换 mix 而非共存，须删除 webpack.mix.js、禁用 mix 并配置 vite.config.js 与 config/vite.php 对齐 build.outdir 和 manifest；blade 必用 @vite 指令以支持 hmr 与哈希资源加载，缺 manifest.json 将导致白屏或缓存错误。

laravel怎么引入vite编译_laravel如何管理前端资源【教程】

Vite 在 Laravel 里不是“引入”而是“替换”——你得关掉 Mix，删掉 webpack.mix.js，否则两个构建工具会抢资源、爆缓存、热更新失灵。

怎么让 Laravel 用上 vite build 的产物

核心是把 vite build 输出的静态文件路径，对齐到 Laravel 的 public/ 目录，并让 Blade 正确加载哈希后的资源。

运行 vite build 后，默认生成到 public/build/（由 vite.config.js 中的 build.outDir 控制），Laravel 的 @vite 指令默认也找这里
Blade 中必须用 @vite(['resources/js/app.js'])，不能手写 <script src="..."></script> —— 否则开发时 HMR 失效，生产时无法注入哈希
如果改过 build.outDir（比如改成 public/assets），就得同步在 vite.config.js 里配 build.manifest: true，并在 config/vite.php 中加 'build_directory' => 'assets'

@vite 指令背后到底做了什么

它不是简单插入 script 标签，而是在开发和生产环境下做两套事：开发时注入 Vite 开发服务器的 WebSocket 连接，生产时从 manifest.json 查真实文件名（含 hash）。

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

开发时：@vite 会输出类似 <script type="module" src="http://localhost:5173/@vite/client"></script> + 入口脚本，依赖本地 Vite 服务运行
生产时：必须先跑 vite build 生成 manifest.json，@vite 才能读取并替换为带 hash 的路径，例如 assets/app.8a2f3bdc.js
如果部署后页面白屏且控制台报 Failed to fetch dynamically imported module，大概率是 manifest.json 没生成、路径不对，或没上传到服务器

为什么 mix 和 vite 不能共存

它们都监听 resources/js/，都试图往 public/ 写文件，但策略完全不同：Mix 硬拷贝 + 时间戳，Vite 用哈希 + manifest 映射。冲突点集中在缓存、热更新、CDN 路径这几块。

删除 webpack.mix.js 和 node_modules/.bin/mix，卸载 laravel-mix 相关包（保留 laravel-vite-plugin）
npm run dev 必须指向 vite（检查 package.json 的 "scripts": {"dev": "vite"}）
旧项目迁移时，别忘了清空 public/mix-manifest.json 和 public/js/、public/css/ 下 Mix 产出的文件，否则 Nginx/Apache 可能优先命中旧资源