安装插件

在你的 Vue 3 项目中，通过 npm 或 yarn 等包管理器安装 unplugin-vue-router。

npm

npm install unplugin-vue-router

yarn

yarn add unplugin-vue-router

pnpm

pnpm add unplugin-vue-router

配置 vite

在你的 vite.config.ts 中引入并配置插件。

关键点：VueRouter() 必须放在 vue() 插件之前。

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueRouter from "unplugin-vue-router/vite"; // 引入 unplugin-vue-router

export default defineConfig({
  plugins: [
    VueRouter({
      /* 插件选项，例如 routesFolder: 'src/pages' */
      // 默认匹配 vue 和 md文件，也可以添加其他文件扩展名
      extensions: [".vue", ".md"],
      // 匹配 pages 目录，插件会自动将该目录下的文件结构转换为路由
      routesFolder: "src/pages/",
      // 指定生成路由类型声明文件的存放目录
      dts: "src/types/typ
    vue(), // 确保 vue() 在 VueRouter() 之后
  ],
});

修改 TypeScript 引导文件

为了让 TypeScript 识别自动生成的路由类型，在 env.d.ts 或类似类型声明文件中添加以下引用：

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" /> // 添加这行

修改路由导入方式

将原本手动创建路由的文件（通常是 src/router/index.ts）单独提取出来。

删除原有的配置内容修改为以下配置，并在 src/main.ts 中重新导入。

src/config/router.ts

// 注意是从 `vue-router` 修改为  `vue-router/auto` 导入
import { createRouter, createWebHistory } from "vue-router/auto";
// 插件会自动生成 routes 数组
import { routes } from "vue-router/auto-routes";

const router = createRouter({
  history: createWebHistory(),
  routes, // 使用自动生成的路由配置
});

export default router;

src/main.ts

import { createApp } from "vue";
// 导入路由相关的配置
import router from "~/config/router";

// 创建 APP 实例
const app = createApp(App);

// 路由配置
app.use(router);

调整 App.vue 内容

清空 src/App.vue 内容，只保留 <RouterView /> 组件。

<!-- src/App.vue -->
<template>
  <RouterView />
</template>

此时已经完成了 路由的配置和 App.vue 的调整。接下来可以在 src/pages 目录下创建页面组件，插件会自动将这些组件转换为路由。

更新日志

2025/9/27 17:16

查看所有更新日志

• 1eb9b-docs(Javascript): 更新Generator生成器函数文档内容于 2025/9/27