Vue 自动生成前端路由的终极指南

背景知识

在进行大型的中后台业务系统（这里主要指 Vue SPA ）开发时，我们会经常花费大量的时间，去处理路由的配置这种纯体力劳动。

并且，我们在大型系统多人协作开发中，产生代码冲突的最多部分也是出现在路由配置上。

本文主要介绍，如何通过自动化脚本实现，基于文件系统的SPA 路由生成的方式。 方法主要有两种， 基于 Vite 插件的形式 和 基于 Node 脚本两种。

方案一： 使用 Vite 插件 （vite-plugin-pages）

Vite 插件的这种形式，不仅适用于Vue 同样适用于 React。接下来介绍具体步骤：

安装插件依赖：

npm install vite-plugin-pages --save-dev

在Vite.config.js 中配置 vite-plugin-pages 插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
    vue(),
    Pages({
      // 可以在这里自定义选项
    }),
  ],
});

定义目录结构，并在目录中，创建路由文件。

我们在这里仅仅为了演示，就用pages做为示例：

src/
└── pages/
├---- index.vue
├---- about.vue
└---- users/
└------ index.vue
└-- main.js
└-- ... 其他内容

高级实践补充。 我们在实际具体实践中，经常会出现带有参数的路由，这个时候，插件还能生效吗？ 其实也是可以的.

src/pages/users/[id].vue -> /users/:id (/users/one)

// 相当于; 

src/
+---pages/
+-----users/
+-------[id].vue
+----- 其他目录

更多用法，可以参考github 的文档。https://github.com/hannoeru/vite-plugin-pages

讲完了如何配置, 接下来，我们演示一下如何在Vue 中应用生成的路由。

在 main.js 或 main.ts 中：

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createApp(App).use(router).mount('#app');

如上就是通过插件实现路由自动生成的具体实现过程。 我们一起来看一下，另外一种方案。

方法二：使用Node.js 脚本实现

在展开具体实现之前，请确保你已经安装 node.js , 并且Vue 项目中已经安装VueRouter的 依赖库。

这个方案，主要是通过Node的 fs 文件模块，读取项目目录，并根据项目目录，写入一个 route.js 文件来实现。

第一步，我们需要在根目录下创建一个 node.js 脚本文件。 暂且命名为 generateRoutes.js.

// generateRoutes.js

const fs = require('fs');
const path = require('path');

function generateRoutes(dir, baseRoute = '') {
  const files = fs.readdirSync(dir);
  const routes = [];

  files.forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      routes.push({
        path: baseRoute + '/' + file,
        component: `@/pages${baseRoute}/${file}/index.vue`,
        children: generateRoutes(fullPath, baseRoute + '/' + file),
      });
    } else if (file.endsWith('.vue')) {
      const routePath = file === 'index.vue' ? baseRoute : baseRoute + '/' + file.replace('.vue', '');
      routes.push({
        path: routePath,
        component: `@/pages${baseRoute}/${file}`,
      });
    }
  });

  return routes;
}

const routes = generateRoutes(path.resolve(__dirname, 'src/pages'));

fs.writeFileSync(path.resolve(__dirname, 'src/routes.js'), `export default ${JSON.stringify(routes, null, 2)}`);

上方的脚本， 简单的实现了，基于目录用node.js 生成的过程。

如果想在工程中使用，我们就需要配置的 package.json 中。

{
  "scripts": {
    "generate:routes": "node generateRoutes.js",
    "dev": "npm run generate:routes && vite",
    "build": "npm run generate:routes && vite build"
  }
}

通过改变，开发服务运行脚本，我们实现了，每次启动本地服务 和 执行打包之前就已经生成了路由文件。

在 Vue 应用中使用生成的路由，就和我们日常开发中，手动配置一样了。

在 main.js 或 main.ts 中：

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createApp(App).use(router).mount('#app');

总结

使用 vite-plugin-pages 可以在 Vite 驱动的 Vue 项目中以最少的配置自动生成路由。

编写自定义node.js 脚本的方式可以对生成的过程提供更多的控制和灵活性。

如果对于大型的企业级应用，node.js 脚本的方式，可能更稳定更可靠一些。