mix与vite不能共存,否则会导致构建冲突、资源重复注入、哈希失效及public目录混乱;需先确认实际生效工具,再分步清除mix残留(删mix-manifest.json、webpack.mix.js及mix相关脚本)、卸载laravel-mix依赖,并清理vite缓存(如node_modules/.vite)及浏览器缓存。

项目中Mix和Vite同时存在会导致构建冲突、资源重复注入、哈希文件失效、public目录混乱,甚至出现CSS未加载或JS报错却查不到来源的诡异问题。
确认当前实际生效的构建工具
先判断哪个工具真正在运行,避免误删有效产物。打开终端,进入项目根目录:
执行 ls -la public/,观察是否存在 mix-manifest.json 或 build/ 子目录;若两者都存在,说明历史构建残留未清理。
再执行 grep -r "@vite" resources/views/,若返回结果非空,证明Vite已被启用;同理执行 grep -r "mix(" resources/views/,若也命中,则模板层混用了两种资源引用方式——这正是问题根源之一。
分步清除Mix残留
仅当项目已明确迁移到Vite且不再使用Laravel Mix时执行本节操作。
第一步:删除Mix生成的全部产物与配置痕迹
执行 rm -f public/mix-manifest.json public/css/* public/js/* public/fonts/* public/images/* → 注意通配符不匹配子目录,不会误删build/下的Vite资源。
第二步:移除Mix专属配置与脚本
删除 webpack.mix.js 文件;检查 package.json 中 scripts 字段,移除所有含 mix 的命令(如 "dev": "npm run development"、"production": "mix --production");保留 "build" 和 "dev"(指向vite)即可。
第三步:清理Node.js层面的Mix依赖
执行 npm uninstall laravel-mix --save-dev → 若提示“not found in package.json”,说明早已卸载,跳过此步;【不执行此步可能引发后续npm install时自动重装laravel-mix】。
清除Vite残留缓存
Vite缓存分散在多个位置,仅删node_modules无法解决依赖更新不生效、样式丢失等问题。
方法一:一键清空预构建缓存
执行 rm -rf node_modules/.vite → 这是Vite最核心的依赖预构建缓存,删后首次启动会重建,耗时略长但最彻底。
方法二:强制重建并跳过缓存校验
在 package.json 的 dev 脚本中加入 --force 参数:"dev": "vite --force",保存后直接运行 npm run dev,Vite将忽略所有本地缓存重新解析依赖图。
方法三:清理浏览器与服务器双重缓存
启动开发服务器后,在浏览器地址栏末尾加 ?t=1 强制刷新资源请求;同时按 Cmd+Shift+R(Mac)或 Ctrl+F5(Windows)硬性重载页面,绕过Service Worker与内存缓存。
清理混合构建导致的public目录污染
当Mix与Vite曾交替运行,public目录常出现交叉文件:例如 public/css/app.css(Mix输出)与 public/build/assets/app.xxxxx.css(Vite输出)共存,但Blade中只引用了后者,前者纯属冗余。
执行以下命令精准剔除无用文件:
find public/ -type f \( -name "*.css" -o -name "*.js" \) -not -path "public/build/*" -not -name "manifest.json" -delete
该命令保留 public/build/ 下全部内容,仅删除其外层独立的CSS/JS文件——【执行前务必确认当前项目已完全切换至Vite,且blade中未使用mix()函数】。
最后,检查 public/index.php 是否被意外覆盖或修改;若存在非标准改动,从Laravel官方仓库拉取原始版本覆盖。











