运行原本正常的Vue.js+Laravel项目执行npm run dev报main.js模块找不到错误

错误详情 #

INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error

This relative module was not found:

./src/main.js in multi ./node_modules/@vue/cli-service/node_modules/webpack-dev-server/client?http://127.0.0.1:8083/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

错误产生原因 #

• main.js核心入口文件被误删、移动到其他目录，或文件名大小写被修改（类Unix系统对文件名大小写敏感，会判定为文件不存在）
• 打包配置的入口路径被修改，和实际main.js存放路径不匹配：独立Vue项目对应vue.config.js的entry配置，Laravel集成项目对应webpack.mix.js的js入口配置
• 前端依赖缓存异常，node_modules依赖损坏或webpack编译缓存过期
• 端口8083被其他进程占用，导致开发服务器启动异常触发路径解析错误

修复方案 #

• 校验入口文件存在性 #

  检查项目对应目录下的main.js文件：独立Vue项目核对src/main.js是否存在，Laravel集成项目通常前端资源存放在resources/js/目录，核对对应路径下是否存在main.js，如果文件被移动/重命名，放回对应路径或修正文件名即可。

• 核对打包入口配置 #

  • 独立Vue项目：打开vue.config.js，检查entry入口配置，默认无需自定义的情况下可删除自定义入口配置，走默认./src/main.js路径即可
  • Laravel集成项目：打开webpack.mix.js，检查mix.js()的第一个参数路径，确保和实际main.js的存放路径一致

• 清理缓存重装依赖 #

  依次执行以下命令清除失效缓存、重装依赖：

  rm -rf node_modules
  rm -f package-lock.json yarn.lock
  npm cache clear --force
  npm install
  

  依赖安装完成后重新执行npm run dev测试。

• 端口冲突排查 #

  检查本地8083端口是否被其他进程占用，可修改vue.config.js中devServer.port字段更换端口，或关闭占用8083端口的进程后重试。

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