必须先彻底卸载 Laravel Mix 并清理其遗留文件，再安装 Vite 及 laravel-vite-plugin，配置 vite.config.js 指定 JS 入口（CSS 需在 app.js 中 import），Blade 中仅用 @vite(['resources/js/app.js']) 引入，最后通过 npm run build 生成带哈希的资源并验证路径正确性。
你的 Laravel 8 老项目还在用 Laravel Mix 加载 CSS，但想换成 Vite 又怕页面白屏、样式丢失、缓存炸开——这不是简单改个指令的事，得先清旧账、再立新规，否则 @vite 一加进去，public/build 下空空如也，浏览器直接 404。
确认当前构建工具并清理 Mix 遗留
执行 ls -la | grep -E "(webpack|mix)" 查看是否还存在 webpack.mix.js 或 node_modules/.bin/mix。如果存在，说明 Mix 仍在项目中活跃，Vite 无法接管。
运行 npm uninstall laravel-mix webpack webpack-cli webpack-dev-server cross-env 彻底卸载 Mix 生态链。
删除 webpack.mix.js 文件：rm webpack.mix.js。这一步不可跳过——Mix 和 Vite 会同时往 public/ 写文件，但策略冲突：Mix 硬拷贝 + 时间戳，Vite 哈希 + manifest 映射，共存必出缓存错乱。
立即学习“前端免费学习笔记（深入）”；
【必须清空 public/mix-manifest.json 和 public/js/、public/css/ 下所有 Mix 产出的文件】，否则 Nginx/Apache 可能优先命中旧资源，导致新 CSS 根本不加载。
安装 Vite 并配置入口
运行 npm install --save-dev vite laravel-vite-plugin 安装核心依赖。
在项目根目录创建 vite.config.js，内容如下：
import { defineConfig } from 'vite';<br>import laravel from 'laravel-vite-plugin';<br><br>export default defineConfig({<br> plugins: [<br> laravel(['resources/css/app.css', 'resources/js/app.js']),<br> ],<br>});
注意：CSS 必须由 JS 入口引入，不能单独丢进 @vite 数组里——Vite 的 @vite 指令只认 JS 入口，CSS 要靠 resources/js/app.js 里的 import '../css/app.css' 触发编译。如果你的 app.js 里没这行，现在就加上。
修改 Blade 模板引入方式
打开 resources/views/layouts/app.blade.php（或其他主布局文件）。
找到原来类似 <link href="{{ mix('css/app.css') }}" rel="stylesheet"> 或 @mix('css/app.css') 的写法。
全部替换成：@vite(['resources/js/app.js']) —— 这是唯一合法写法，@vite('resources/js/app.js') 会静默失败或报错。
这一步做完后，开发时 npm run dev 启动 Vite 服务器，它会自动注入 HMR 脚本；生产时则依赖 vite build 生成的 manifest.json 来替换真实哈希路径。
运行构建并验证 CSS 是否生效
第一步：确保 package.json 中 scripts 已更新为：
"scripts": {<br> "dev": "vite",<br> "build": "vite build"<br>}
第二步：运行 npm run build，检查是否在 public/build/ 下生成了带哈希名的 CSS 文件（如 assets/app.8a2f3bdc.css）和 manifest.json。
第三步：清空浏览器缓存，访问页面，打开开发者工具 → Network 标签页，筛选 CSS，确认加载的是 http://your-app.test/build/assets/app.xxxxxxxx.css 路径，且状态码为 200。
如果看到 404 或加载的是旧 /css/app.css，说明 manifest.json 没生成、路径不对，或 Blade 中仍残留 mix() 调用。
