Vue3导入组件时文件名大小写不一致报错如何解决？

解决方案 #

这个报错是因为文件系统和编译工具对文件名大小写的校验规则不一致导致的，你可以按以下步骤排查解决：

• 先全局校验文件名和所有导入语句的大小写完全匹配：确认components目录下的组件真实文件名是Navbar.vue后，检查项目所有文件中导入该组件的路径写法，确保没有地方写为./components/navBar.vue这类大小写不一致的格式。
• 清理项目编译缓存：停止本地开发服务，删除项目下的缓存目录（Vite项目删除根目录.vite文件夹，Vue CLI项目删除node_modules/.cache文件夹），之后重新启动开发服务即可，该报错大多是改名后旧缓存留存导致的。
• （临时规避方案）如果确认所有引用都正确但依旧报错，可以在tsconfig.json的compilerOptions字段中添加配置"forceConsistentCasingInFileNames": false，关闭TypeScript的大小写强制校验。该方案不推荐长期使用，避免后续部署到大小写敏感的Linux环境时出现文件找不到的问题。

另外注意你App.vue中引入了Vue 2版本的CDN脚本，和当前Vue 3项目完全不兼容，请删除该行<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>避免后续出现其他兼容报错。

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