Vue 为何自动加载 index.vue？

🧩 为什么 Vue 项目中引入文件夹会自动加载 index.vue？

💬 在学习 Vue 项目结构时，很多人都会遇到这样的问题：

当一个文件夹下有多个 .vue 文件，比如：

views/
 └── product/
      ├── index.vue
      ├── save.vue
      ├── detail.vue

我们只写：

import Product from '@/views/product'

页面就会自动显示 index.vue 的内容。为什么？🤔

这是 Vue 的魔法吗？其实背后很有逻辑！

一、这是正常现象吗？

✅ 是的，这不是 Bug！

这个现象是由 构建工具（Webpack / Vite）的模块解析规则

以及 Vue Router 的目录约定 共同导致的。

---

二、核心原理：模块自动解析机制

当你写：

import Product from '@/views/product'

Webpack 或 Vite 会自动查找该文件夹下的默认文件。

一般的查找顺序如下：

product/
 ├── index.js
 ├── index.ts
 ├── index.vue

一旦找到，就会自动加载。

📦 这与 Node.js 的模块加载机制类似：

import utils from './utils'

实际加载的文件是：

./utils/index.js

---

三、Vue Router 与"约定优于配置"

在 Vue 项目中，常见路由写法如下：

{
  path: '/product',
  component: () => import('@/views/product')
}

这时系统自动加载 @/views/product/index.vue，

于是 /product → product/index.vue 的对应关系就成立了。

这就是一种典型的「约定优于配置（Convention over Configuration）」设计思想。

文件	对应路由
product/index.vue	/product
product/save.vue	/product/save
product/detail.vue	/product/detail

让项目结构清晰直观，不需要额外配置。

---

四、如果没有 index.vue 呢？

行为取决于使用的构建工具：

构建工具	自动加载 index.vue？	没有 index.vue 时结果
Vite (Vue3)	❌ 不会	❌ 报错：Failed to resolve import '@/views/product'
Webpack (Vue CLI)	✅ 会	❌ 报错：Can't resolve '@/views/product'

也就是说，如果目录中没有 index.vue，

就必须显式指定文件名：

import ProductSave from '@/views/product/save.vue'

---

五、为什么要保留 index.vue？

保留 index.vue 有几个明显好处：

1. 结构语义更强
   文件夹代表模块，index.vue 代表模块主页面。
2. 路径更简洁
   只需写 import('@/views/product')，不用补文件名。
3. 配合 Vue Router 更直观
   /product → product/index.vue 这种映射一目了然。

---

六、实战建议 ✅

场景	推荐做法
Vue3 + Vite 项目	显式写 .vue 文件名，更稳
Vue2 + Webpack 项目	可省略，自动识别 index.vue
大型项目结构	使用 index.vue 作为目录入口，保持一致性

示例：

// 推荐写法（通用、稳定）
import Product from '@/views/product/index.vue'

---

七、总结一句话 💬

🧠 当你在 Vue 项目中 import 一个目录时，

构建工具会自动寻找该目录下的 index.vue 作为默认入口。

如果没有，则无法解析。

这种设计体现了 "约定优于配置 " 的思想：

让目录结构天然对应路由结构，使项目更清晰可维护。

---

八、思维导图总结（文字版）

import '@/views/product'
        ↓
是否存在 index.vue？
    ├── ✅ 是 → 自动加载 index.vue（/product）
    └── ❌ 否 → 报错，需显式写文件路径

---

📘 结语

这个规则不仅存在于 Vue，还存在于 Node.js、React、Next.js 等生态中。

理解这一点，不仅能避免莫名的"自动跳转"疑惑，

还可以帮助你更规范地组织 Vue 项目的目录结构。