如何在 Vite 环境下自动生成路由表？利用插件实现约定式路由开发教程

一分耕耘，一分收获！既然都打开这篇《如何在 Vite 环境下自动生成路由表？利用插件实现约定式路由开发教程》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

在 Vite 中推荐使用 unplugin-vue-router 自动生成路由表，它支持类型安全、自动导入和官方工具链深度集成；默认扫描 src/pages 目录，按文件路径生成对应路由，动态路由和嵌套路由均原生支持。

在 Vite 环境下自动生成路由表，核心是借助约定式路由插件，把文件系统结构直接映射为路由配置，省去手动维护 routes 数组的繁琐过程。主流方案有 vite-plugin-pages 和 unplugin-vue-router，两者都成熟稳定，适配 Vue 3 + Vue Router 4，配置简洁、支持动态路由和元信息扩展。

选一个插件并安装依赖

推荐优先使用 unplugin-vue-router：它生成类型安全的路由、支持自动导入、与 Vue 官方工具链集成更紧密；vite-plugin-pages 更轻量，适合快速上手。

• 安装 unplugin-vue-router（含 Vue Router）：
  pnpm add -D unplugin-vue-router
pnpm add vue-router
• 确保项目已初始化为 Vue 3（如未创建，可用 pnpm create vite@latest my-app -- --template vue-ts）

配置插件并启用自动路由

修改 vite.config.ts，注意 unplugin-vue-router 必须放在 vue() 插件之前：

import { defineConfig } from 'vite'
import VueRouter from 'unplugin-vue-router/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
VueRouter({}), // ✅ 必须在 vue() 之前
vue(),
],
})

插件默认扫描 src/pages 目录，无需额外配置路径即可生效。

按约定组织页面文件

在 src/pages 下创建文件，命名即路由路径：

• src/pages/index.vue → 路由 /
• src/pages/about.vue → 路由 /about
• src/pages/users/[id].vue → 动态路由 /users/:id（useRoute().params.id 可取值）
• src/pages/[...all].vue → 兜底路由（如 404 页面），匹配所有未定义路径

嵌套路由也自然支持：比如 src/pages/dashboard/index.vue 对应 /dashboard，其子页 src/pages/dashboard/settings.vue 对应 /dashboard/settings。

创建并挂载路由实例

新建 src/router/index.ts：

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes' // ✅ 自动生成的路由数组
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router

然后在 main.ts 中使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

和 已全局注册，可直接在模板中使用。

不复杂但容易忽略：插件会在开发时实时生成 vue-router/auto-routes 模块，无需手动运行命令；首次启动或新增页面后，热更新会自动刷新路由配置。你只需专注写页面文件，剩下的交给插件。

终于介绍完啦！小伙伴们，这篇关于《如何在 Vite 环境下自动生成路由表？利用插件实现约定式路由开发教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！