Mix和Vite同时存在?如何彻底清理残留文件

浅辰同学_2434

浅辰同学_2434

2026-08-12

521人浏览

原创

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

mix和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无法解决依赖更新不生效、样式丢失等问题。

Vite
Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

方法一:一键清空预构建缓存

执行 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官方仓库拉取原始版本覆盖。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
开发工具有哪些
开发工具有哪些

开发工具有:1、集成开发环境IDE;2、版本控制系统VCS;3、自动化构建工具;4、测试工具;5、代码分析工具。本专题为大家提供开发工具有哪些的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.02

2126

5

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

20

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

0

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

20

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

0

12

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

2026.09.22

20

13

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

2026.09.22

20

19

loomy官网入口地址合集
loomy官网入口地址合集

本专题汇总了 Loomy 桌面 AI 助理的官方入口地址合集及使用指南。提供 macOS 与 Windows 客户端下载 。Loomy 是讯飞推出的桌面级 AI 工作搭子,支持文件整理、数据分析、网页操作及通过飞书/钉钉远程操控电脑,助你高效完成本地办公任务 。

2026.09.22

20

19

NumPy常见函数使用方法
NumPy常见函数使用方法

本专题整理 NumPy 常见函数使用方法相关教程,覆盖函数大全、参数用法、数组运算、统计聚合、排序处理、where 条件筛选、linspace 创建数列等常用场景,帮助读者快速掌握 NumPy 函数调用思路和实际数据处理技巧。

2026.09.22

0

21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第二期_大前端线上班
第二期_大前端线上班

共345课时 | 79.5万人学习