🧩 为什么 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 有几个明显好处：
- 结构语义更强
文件夹代表模块，index.vue代表模块主页面。 - 路径更简洁
只需写import('@/views/product')，不用补文件名。 - 配合 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 项目的目录结构。
