致命空袭2无敌版
154.25MB · 2025-11-30
点赞 + 收藏 === 学会???
本文档介绍如何使用 vite 和 vite-plugin-pages 在前端项目中自动生成前端路由，通过文件系统结构自动映射为路由配置，减少手动维护路由的工作量。
首先需要安装用于自动生成路由的插件：
npm install vite-plugin-pages --save-dev# 或yarn add vite-plugin-pages -D# 或pnpm add vite-plugin-pages -D
在 vite.config.ts 中配置插件：
import { defineConfig } from 'vite'import Vue from '@vitejs/plugin-vue'import Pages from 'vite-plugin-pages'export default defineConfig({ plugins: [ Vue(), Pages({ // 基本配置选项 dirs: 'src/views', // 路由组件目录 exclude: ['**/components/*.vue'], // 排除的组件 extensions: ['vue'], // 支持的文件类型 // 更多配置见下文 }), ],})默认情况下，插件会扫描 src/views 目录下的 .vue 文件并自动生成路由：
src/views/ ├── index.vue -> / ├── about.vue -> /about ├── users/ │ ├── index.vue -> /users │ └── [id].vue -> /users/:id └── blog/ ├── index.vue -> /blog └── [slug].vue -> /blog/:slug
使用方括号命名文件来创建动态路由：
[param].vue -> /:param
[...all].vue -> /*
创建与父路由同名的目录来生成嵌套路由：
src/views/ ├── users/ │ ├── [id].vue │ └── index.vue └── users.vue
会生成如下路由结构：
{ "path": "/users", "component": "/src/views/users.vue", "children": [ { "path": "", "component": "/src/views/users/index.vue" }, { "path": ":id", "component": "/src/views/users/[id].vue" } ]}可以在页面组件中使用 <route> 块来自定义路由属性：
<route>{ "meta": { "requiresAuth": true }, "alias": ["/home"]}</route><template> <div>Home Page</div></template>在插件配置中可以通过 extendRoute 修改生成的路由：
Pages({ extendRoute(route, parent) { if (route.path === '/') { return { ...route, alias: ['/home'] } } return route }})支持生成 vue-router 或 react-router 格式的路由：
Pages({ routerMode: 'vue' // 或 'react'})import { createRouter } from 'vue-router'import routes from 'virtual:generated-pages'const router = createRouter({ // ... routes,})import { createBrowserRouter } from 'react-router-dom'import routes from 'virtual:generated-pages'const router = createBrowserRouter(routes)对于 TypeScript 项目，添加以下类型声明：
/// <reference types="vite-plugin-pages/client" />
my-project/├── src/│ ├── pages/│ │ ├── index.vue│ │ ├── about.vue│ │ ├── users/│ │ │ ├── [id].vue│ │ │ └── index.vue│ │ └── blog/│ │ ├── index.vue│ │ └── [slug].vue│ ├── App.vue│ └── main.ts├── vite.config.ts└── package.json
console.log(routes) 查看生成的路由结构
