Vue.js 报错：[vite] Failed to resolve import “xxx” from “xxx.vue” —— 3 分钟急救手册

当你在终端看到：

[vite] Failed to resolve import "xxx" from "xxx.vue".

Vite 在告诉你：
“我找不到你在代码里 import 的那个模块。”
99% 是「路径、后缀、别名、模块」四件事没对齐。按「一看二查三修复」三步法，3 分钟搞定。

---

一、一看：确认报错路径

报错信息	含义
Failed to resolve import "./components/Foo"	相对路径找不到
Failed to resolve import "@/components/Foo"	别名解析失败
Failed to resolve import "lodash"	第三方库未安装

---

二、二查：4 个高频翻车点

1️⃣ 文件路径或大小写错误

import Foo from './components/foo'   // ❌ 文件实际叫 Foo.vue

修复：对齐大小写 + 后缀

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

Linux 严格区分大小写，CI 必现！

---

2️⃣ 忘记安装第三方库

import lodash from 'lodash'   // ❌ 没装

修复：

npm i lodash
# 或 只装工具函数
npm i lodash-es

---

3️⃣ 别名未配置或写错

import Foo from '@/components/Foo'   // ❌ 别名未配

修复（Vite）：

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

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

---

4️⃣ 动态导入路径拼错

const comp = defineAsyncComponent(() => import(`./components/${name}.vue`))
// ❌ Vite 无法静态分析变量

修复：显式白名单

const components = {
  Foo: () => import('./components/Foo.vue'),
  Bar: () => import('./components/Bar.vue')
}
const comp = defineAsyncComponent(components[name])

---

三、三修复：一键验证

# 1. 文件存在
ls src/components/Foo.vue

# 2. 安装缺失依赖
npm i lodash

# 3. 重启 Vite
npm run dev

---

四、一句话总结

「Failed to resolve」= 路径/大小写/别名/依赖四选一。
对好路径、装好包、配好别名，Vite 立刻找到文件。

---

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

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