Vue-cli项目执行npm run serve报错：无法解析webpack-dev-server模块

1. 排查路径特殊字符问题 #

错误路径中包含#号，Windows系统下文件路径存在特殊字符（#、空格、中文等）会导致webpack解析资源路径异常。

• 确保项目根路径全为英文、无特殊符号、无空格，比如将#test_project_vue重命名为test-project-vue，重新进入项目目录执行命令。

2. 修复防火墙权限限制 #

Windows Defender防火墙的权限拦截可能导致webpack-dev-server无法正常启动：

• 打开「Windows Defender防火墙」→「允许应用通过防火墙」，点击「更改设置」，找到node.exe或webpack-dev-server，勾选「私有网络」和「公共网络」权限；若找不到，点击「允许另一个应用」，添加项目目录下node_modules/.bin/webpack-dev-server.cmd或全局node.exe的路径，确认后勾选权限。
• 右键以管理员身份打开命令提示符/终端，进入项目根目录再执行npm run serve，避免权限不足导致的文件访问失败。

3. 调整NODE_OPTIONS配置 #

添加--openssl-legacy-provider可能与当前Node版本或vue-cli版本不兼容：

• 临时恢复默认scripts配置，测试是否能正常启动：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  

• 若因Node版本过高（如v18+）必须使用该参数，先确认vue-cli版本与Node版本匹配：vue-cli 4.x适配Node 10-16，vue-cli 5.x支持Node 14+，不匹配则升级/降级vue-cli或Node版本。

4. 修复webpack-dev-server依赖 #

可能该依赖安装不完整或损坏：

• 单独重装webpack-dev-server：

  npm install webpack-dev-server --save-dev
  

• 若学校网络npm源不稳定，换国内镜像重新安装所有依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install --registry=https://registry.npmmirror.com
  

5. 禁用webpack缓存启动 #

vue-cli的webpack缓存可能导致异常，尝试禁用缓存启动：

npm run serve -- --no-cache

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