第一步，必须把 Lara vel Mix 彻底卸载干净，同时把它留下的残余文件一并清理掉。

接着再安装 Vite 和 lara vel-vite-plugin。

随后配置 vite.config.js，明确指定 JS 入口。CSS 这一部分则要放到 app.js 里通过 import 引入。

到了 Blade 模板中，只需要使用 @vite(['resources/js/app.js']) 来加载资源。

最后执行 npm run build 生成带哈希的静态资源，并仔细验证路径是否完全正确。

你的 Lara vel 8 老项目还在用 Lara vel 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 lara vel-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 --sa ve-dev vite lara vel-vite-plugin 安装核心依赖。

在项目根目录创建 vite.config.js，内容如下：

import { defineConfig } from 'vite';
import lara vel from 'lara vel-vite-plugin';

export default defineConfig({
  plugins: [
    lara vel(['resources/css/app.css', 'resources/js/app.js']),
  ],
});

CSS 引入方式要注意

需要特别注意一点：CSS 必须通过 JS 入口来引入，不能单独塞进 @vite 数组中。

原因很直接，Vite 的 @vite 指令只识别 JS 入口。

CSS 的编译依赖 resources/js/app.js 里这句 import '../css/app.css' 来触发。

要是你的 app.js 里还没有这一行，建议立刻补上。

修改 Blade 模板引入方式

打开 resources/views/layouts/app.blade.php，或其他主布局文件。

找到原来类似 或 @mix('css/app.css') 的写法。

全部替换成：@vite(['resources/js/app.js'])

这是唯一合法写法，@vite('resources/js/app.js') 会静默失败或报错。

这一步做完后：

• 开发时，npm run dev 启动 Vite 服务器，它会自动注入 HMR 脚本。

• 生产时，则依赖 vite build 生成的 manifest.json 来替换真实哈希路径。

运行构建并验证 CSS 是否生效

第一步：检查 scripts 配置

确保 package.json 中 scripts 已更新为：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

第二步：执行构建

运行 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() 调用