Vue.js+TypeScript项目构建时相对模块未找到问题求助

你已经尝试了各种常规方案都没解决，咱们从几个容易被忽略的细节入手排查：

1. 文件名大小写不匹配（最可能的原因） #

很多操作系统（Linux/macOS）对文件名大小写是敏感的。你在main.ts里写的是：

import App from './app.vue';

但你提供的文件是App.vue（大写开头），如果实际项目里的文件名是App.vue，那这个导入路径的大小写就不匹配了，系统会找不到文件。把导入改成./App.vue试试！

2. 确认文件路径的正确性 #

检查main.ts和App.vue是否真的在同一个src目录下。你可以在项目根目录的终端里执行：

# Mac/Linux
ls src
# Windows
dir src

查看输出里是否有App.vue，以及它的位置是否和main.ts同级。如果App.vue在子目录里，路径就要对应调整，比如./components/App.vue之类的。

3. 检查Vue CLI或Webpack的路径配置 #

• 查看vue.config.js里有没有自定义的路径别名（比如configureWebpack.resolve.alias），如果别名覆盖了相对路径的解析，可能导致找不到文件。
• 检查Webpack的resolve.extensions配置，确保.vue在扩展名列表中（Vue CLI默认是包含的，但如果手动修改过就需要确认）。

4. TypeScript路径映射干扰 #

打开tsconfig.json，查看compilerOptions.paths部分，如果有针对./app.vue或者相关路径的映射配置，可能会干扰正常的相对路径导入，尝试暂时注释掉这些配置再编译试试。

5. 检查文件是否被意外排除 #

看看.gitignore或者项目里的其他配置文件，有没有把App.vue排除在编译范围之外？不过这种情况比较少见，但也可以排查一下。

先试试第一个大小写的问题，这是跨系统开发中最常见的坑，大概率能解决你的问题！

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