Vue.js 报错：Cannot find module ‘./components/xxx.vue‘ —— 3 分钟急救手册

Vue.js 报错：Cannot find module ‘./components/xxx.vue’ —— 3 分钟急救手册

当你在终端或浏览器控制台看到：

Cannot find module './components/xxx.vue'

说明 模块解析器找不到你引用的文件。99% 是「路径、后缀、大小写、配置」四件事没对齐。本文按「症状 → 排查 → 修复」三步法，3 分钟搞定。

---

一、快速自查表

症状	检查点	修复示例
路径写错	相对/绝对路径、文件夹层级	import Comp from '@/components/Comp.vue'
文件不存在	文件真没建或被移动	touch src/components/Comp.vue
大小写不一致	mac/win 不敏感，Linux 敏感	Comp.vue ≠ comp.vue
缺少 .vue 后缀	部分打包器需要显式后缀	import Comp from './Comp.vue'
Vite/Webpack 未配置别名	@ 指向 src	补 alias

---

二、4 个高频翻车现场 & 修复

1️⃣ 相对路径层级写错

// 实际文件在 src/components/Comp.vue
import Comp from '../components/Comp.vue' // ❌ 多/少 ../

修复：

import Comp from '@/components/Comp.vue' // ✅ 用 @ 别名

---

2️⃣ 大小写不一致（Linux CI 必现）

import Comp from './components/comp.vue' // ❌

修复：

import Comp from './components/Comp.vue' // ✅ 完全一致

---

3️⃣ 忘记写 .vue 后缀（某些配置）

import Comp from './components/Comp' // ❌

修复：

import Comp from './components/Comp.vue' // ✅

---

4️⃣ Vite 未配置 @ 别名

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

---

三、一键修复脚本（复制即用）

# 1. 确认文件存在
ls src/components/Comp.vue

# 2. 修正大小写
git mv src/components/comp.vue src/components/Comp.vue

# 3. 重启 dev server
npm run dev

---

四、一句话总结

找不到模块 = 路径/大小写/后缀/别名四选一。
按 文件存在 → 路径正确 → 大小写一致 → 配置 alias 顺序排查，报错立即消失。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》