Vue3+Vite项目路由自动化：vite-plugin-pages实战与布局集成

1. 为什么需要路由自动化？

在Vue3+Vite项目中，手动配置路由一直是个麻烦事。每次新增页面都要在router.js里添加一条路由记录，项目大了之后维护起来特别头疼。我做过一个后台管理系统，光路由文件就有500多行，每次修改都得小心翼翼。

vite-plugin-pages这个插件完美解决了这个问题。它会自动扫描你项目中的页面文件，根据文件目录结构生成对应的路由配置。比如你在src/pages下新建一个users.vue，访问/users就能自动渲染这个页面，完全不用手动配置。实测下来，这个插件能让路由配置效率提升80%以上。

2. 快速上手vite-plugin-pages

2.1 基础安装与配置

首先用你喜欢的包管理器安装插件：

bash复制npm install vite-plugin-pages vite-plugin-vue-layouts -D

然后在vite.config.js中添加配置：

javascript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      dirs: 'src/pages', // 页面文件目录
      exclude: ['**/components/*.vue'] // 排除组件目录
    }),
    Layouts({
      layoutsDirs: 'src/layouts' // 布局文件目录
    })
  ]
})

2.2 路由自动生成原理

插件的工作原理很有意思。它会：

1. 实时监听pages目录下的文件变动
2. 根据文件路径生成路由路径
3. 将.vue文件编译成路由组件
4. 通过虚拟模块(virtual:generated-pages)暴露路由配置

比如这样的文件结构：

code复制src/pages/
  ├─