Vue搭配Laravel运行npm run hot报Module not found错误如何解决

问题原因 #

该报错是webpack无法识别你导入的./vue/app路径对应的文件，核心常见原因有3个：

1. 导入Vue组件时未补全.vue后缀，webpack默认不会自动识别该后缀
2. Laravel Mix未配置Vue编译规则，缺少对应文件解析能力
3. 文件名大小写、路径拼写与实际目录结构不匹配

解决步骤 #

1. 优先尝试补全导入后缀（90%以上场景可直接解决）

修改resources/js/app.js里的导入语句，加上.vue后缀：

// 改前
import App from './vue/app'
// 改后
import App from './vue/app.vue'

修改后重新执行npm run hot验证即可。

2. 配置webpack自动补全.vue后缀（可选，适配无后缀导入写法）

如果你不想每次导入Vue组件都加后缀，可在项目根目录的webpack.mix.js中添加扩展名自动识别配置：

mix.js('resources/js/app.js', 'public/js')
    .vue() // 确保这里已经开启vue编译支持
    .webpackConfig({
        resolve: {
            extensions: ['.js', '.vue', '.json']
        }
    })

配置保存后重新执行npm run hot即可。

3. 兜底排查项

如果以上操作无效，依次检查以下内容：

• 确认resources/js/vue目录下的文件名确实是app.vue，无大小写拼写错误
• 确认项目已安装Vue对应依赖，Vue2环境需配套安装vue-loader@15 vue-template-compiler，执行npm i vue-loader@15 vue-template-compiler -D安装即可
• 删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install后再启动服务

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