TypesScript+vue3+vite项目根据文件目录自动生成路由注册表

在Vue 3和Vite项目中，可以使用自动化工具来根据文件目录结构生成路由注册表。以下是一个使用TypeScript和Vue 3 Labs的新功能 - script setup 的简单例子：

首先，安装必要的依赖：

npm install vue-router@4 @types/vue-router --save

然后，创建一个router.ts文件，并定义路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  // 其他路由...
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
export default router;

在main.ts中引入路由并使用：

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

现在，你需要一个方法自动生成routes数组。这个过程通常涉及文件系统操作和正则表达式匹配。但是，这个操作很繁琐，并且容易出错。因此，推荐使用如vue-router-dir这样的第三方库来简化这个过程。

安装vue-router-dir：

npm install vue-router-dir --save-dev

然后，在项目中使用它来自动生成路由：

import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import VueRouterDir from 'vue-router-dir';
 
// 获取当前文件的目录
const __dirname = dirname(fileURLToPath(import.meta.url));
 
// 自动生成路由配置
const routes = VueRouterDir({
  dir: join(__dirname, 'src/views'), // 视图文件夹路径
  deep: true, // 是否递归子目录
  ignore: ['**/[name].vue'], // 需要忽略的文件或目录
});
 
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 其他配置...
  // 使用生成的路由配置
  optimizeDeps: {
    include: ['vue-router', 'vue-router-dir']
  }
});

这样，你就可以基于文件系统中的目录结构自动生成路由了。这种方法可以显著减少手动维护路由的工作量，并提高项目的可维护性。