Vue.js搭配webpack运行报EBUSY: resource busy or locked错误如何修复？

[webpack-dev-server] ERROR in ./src/pages/Main.vue
Module build failed (from ./node_modules/vue-loader/dist/index.js):
Error: resource busy or locked, open 'D:\www\vue\myApp\src\pages\Main.vue'

该报错本质是Windows系统下目标文件被其他进程占用锁定，webpack-dev-server执行热更新时无法读取修改后的文件内容导致。由于你所有存量项目、新建项目都触发该问题，优先排查全局通用的进程/配置问题，按优先级尝试以下方案：

1. 排查并关闭占用文件的第三方进程 #

• 关闭所有正在运行的代码编辑器、IDE，重启后仅打开单编辑器测试，排除多窗口同时编辑文件触发的锁冲突
• 临时暂停本地正在运行的杀毒软件、文件实时防护工具、文件同步类软件（含云盘同步、备份工具、Windows Defender实时保护），这类工具会在文件修改时主动扫描占用文件
• 结束全部Node.js相关进程后重启项目：打开Windows任务管理器，找到所有node.exe进程全部终止，再重新执行npm run dev启动项目

2. 清理项目与全局缓存 #

• 执行项目级缓存清理：

# 删除依赖目录与锁文件
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
# 重新安装依赖
npm install
# 清理webpack本地缓存
rm -rf node_modules/.cache

• 清理包管理器全局缓存：

# npm用户执行
npm cache clean --force
# yarn用户执行
yarn cache clean
# pnpm用户执行
pnpm store prune

3. 调整webpack-dev-server监听配置 #

在项目的vue.config.js或webpack配置文件中添加以下配置，调整文件监听逻辑，降低锁冲突概率：

module.exports = {
  devServer: {
    watchOptions: {
      poll: 1000,
      aggregateTimeout: 300,
      ignored: /node_modules/,
    }
  }
}

4. 系统级配置排查 #

如果上述方案均无效，尝试：

• 将项目文件夹移动到其他纯英文、无特殊字符的目录路径，排除当前目录权限异常问题
• 右键点击项目根文件夹，选择「属性」-「安全」-「编辑」，给当前Windows用户添加「完全控制」权限
• 卸载当前Node.js版本，更换为LTS长期支持版本（推荐16.x/18.x，不要使用尝鲜版）后重新测试

内容的提问来源于stack exchange，提问作者vess