插件: 自动生成 Vue 3 项目中的路由配置

在开发大型应用时，手动管理路由配置文件可能会非常繁琐且容易出错。特别是在多页面应用或使用分包的项目中，页面和路由路径可能会不断增加或变化。如果每次都手动更新路由配置文件，开发效率将会大大降低。

我写了一个如何通过自动化脚本生成 Vue 3 项目的路由配置文件。具体来说，将根据 pages.json 文件动态生成路由映射，并且支持分包和 tabBar 配置。

背景

在某些小程序框架（如 Taro 或 WeChat 小程序）中，路由配置是通过 pages.json 文件来维护的。这个文件定义了页面的路径、tabBar 配置、分包等信息。为了提高开发效率，我们希望能够自动从 pages.json 文件中读取这些信息，并生成对应的路由配置文件，而不需要手动去编写。

实现思路

我们可以编写一个 Node.js 脚本，它会：
1. 读取 pages.json 文件。
2. 提取主包和分包的页面路由信息。
3. 生成符合 Vue 3 项目路由要求的配置。
4. 自动生成一个 TypeScript 文件来保存路由映射。

代码实现

我们通过以下脚本实现自动生成路由配置的功能：


/* eslint-disable id-length */
/* eslint-disable @typescript-eslint/no-var-requires */
const fs = require('fs');
const pagesJson = require('../src/pages.json');

const tabBar = (pagesJson?.tabBar ?? [])?.list.map((item) => ({ url: `/${item.pagePath}` }));

const mainPages = pagesJson?.pages?.map((it) => ({ name: it.name || '', path: it.path }));

const subPackages = [];
/** 获取分包的路由 */
pagesJson?.subPackages
    ?.map((it) => {
        if (it.pages) {
            return it.pages.map((vl) => ({ name: vl.name || '', path: it.root + '/' + vl.path }));
        }
    })
    ?.map((it) => {
        if (it) {
            subPackages.push(...it);
        }
    });
const pages = [...mainPages, ...subPackages]; // 所有路由

const tab = '  ';
let str = `
/**
 * 页面路由映射.
 * 请不要在此文件添加任何代码。因为生成后会全量覆盖
 * 运行 npm run route 或者 yarn route 自动生成
 */

export const routeNames = {\n`;

str += pages
    .map(({ name, path }, index) => {
        const key = path.replace(/^\//, '').replace(/\/([a-zA-Z0-9])/g, (_m, p) => p.toUpperCase());
        return `${tab}${tab}/** ${name} */\n${tab}${tab}${key}: '/${path}'${index !== pages.length - 1 ? ',' : ''}`;
    })
    .join('\n');

str += '\n};\n\n';

if (tabBar.length) {
    str +=
        'export const tabbar = ' +
        JSON.stringify(tabBar, undefined, 4)
            .replace(/"(.+)":/g, '$1:')
            .replace(/: "(.+)"/g, ":'$1'");
    str += ';\n\n';
}

fs.writeFile('./src/routes.ts', str, (error) => {
    // 创建失败
    if (error) {
        console.log(`生成失败❌：${error}`);
    }
    // 创建成功
    console.log('🎉🎉🎉🎉路由生成✅');
});

如何使用

将上述脚本文件保存为 generate-routes.js，并放置在项目的根目录中。
在 package.json 中添加一个脚本命令来执行这个脚本：

       "scripts": {
       "route": "node generate-routes.js"
       }

运行命令生成路由配置：
npm run route

总结

通过这个自动化脚本，我们能够轻松地根据 pages.json 文件生成项目中的路由配置。这大大提高了开发效率，避免了手动维护路由的繁琐工作。每当 pages.json 文件更新时，我们只需重新运行脚本，路由配置就会自动更新。

ihopeful Blog