Vue.js项目启动报错：Uncaught TypeError: Cannot read properties of undefined (reading 'e')

你遇到的问题是在已有Node.js后端的目录下创建Vue 3项目后，启动出现空白页且控制台报Uncaught TypeError: Cannot read properties of undefined (reading 'e')错误，且其他目录创建项目无此问题，以下是针对性的解决步骤：

解决步骤 #

1. 清空本地依赖并重新安装 #

这种情况常因依赖安装不完整或缓存异常导致：

• 进入前端项目目录app-frontend
• 删除依赖目录和锁定文件：
  Windows命令：

  rmdir /s /q node_modules
  del package-lock.json
  

  Mac/Linux命令：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：npm install
• 再次启动项目：npm run serve

2. 排查父目录的npm配置干扰 #

如果Project目录下存在.npmrc文件，它会影响子项目的依赖拉取：

• 暂时将Project目录下的.npmrc重命名（比如改成.npmrc.bak）
• 重新执行npm install和npm run serve

3. 锁定webpack-dev-server兼容版本 #

报错来自webpack-dev-server的stripAnsi.js，大概率是版本兼容问题：

• 卸载当前版本：npm uninstall webpack-dev-server
• 安装稳定兼容的4.x版本：npm install webpack-dev-server@4.15.1 --save-dev
• 重启项目验证

4. 更换端口启动测试 #

虽然报错指向依赖，但也可以排除端口冲突的潜在影响：

npm run serve -- --port 8081

访问localhost:8081查看是否正常显示页面

原因说明 #

在同一父目录下共存前后端项目时，父目录的npm配置、全局依赖缓存或版本冲突可能会干扰前端项目的依赖加载，尤其是webpack相关工具链的版本不匹配，容易引发这类底层工具的执行错误。

内容的提问来源于stack exchange，提问作者David Jiménez Belmonte