Laravel 5.8中Vue组件导入失败求助：无法解析组件模块

你遇到的是Vue组件开发里很常见的新手问题，我帮你一步步排查解决：

1. 最可能的原因：导入路径错误 #

你在formToDo.vue里写的导入路径是./components/modalAlert.vue，但从你的文件结构来看，formToDo.vue本身已经在resources/js/components/目录下了——这意味着程序会去寻找resources/js/components/components/modalAlert.vue，这个路径根本不存在，所以才会报错。

修复方法： #

把formToDo.vue里的导入代码改成：

import modalAlert from './modalAlert.vue';

这样就会从当前文件所在的components目录里直接查找modalAlert.vue了。

2. 可选优化：利用全局注册简化代码 #

另外注意到你已经在app.js里全局注册了modal-alert组件：

Vue.component('modal-alert', require('./components/modalAlert.vue').default);

全局注册的组件可以在任何Vue组件里直接使用，不需要再局部导入和注册。所以你完全可以删掉formToDo.vue里的这两段代码：

import modalAlert from './components/modalAlert.vue';
// ...
components: { 'modal-alert': modalAlert },

直接保留<modal-alert></modal-alert>标签就行，这样代码更简洁，也避免了重复导入的问题。

3. 额外排查：文件名大小写问题 #

如果你的服务器是Linux/macOS环境，系统对文件名大小写是敏感的。比如如果实际文件名是ModalAlert.vue，但你导入时写的是modalAlert.vue，也会出现找不到模块的错误。请确保你的导入语句里的文件名和实际文件名完全一致。

最后一步：重新编译资源 #

修改完代码后，一定要运行Laravel Mix的编译命令：

npm run dev
# 或者使用监听模式，修改代码自动编译
npm run watch

编译完成后刷新页面，问题应该就能解决了。

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