{"id":19924621,"url":"https://github.com/qdabuliuq/router-builder","last_synced_at":"2026-04-20T05:34:27.533Z","repository":{"id":218729610,"uuid":"746245599","full_name":"QdabuliuQ/Router-Builder","owner":"QdabuliuQ","description":"根据目录自动生成路由结构的插件","archived":false,"fork":false,"pushed_at":"2024-05-09T04:02:10.000Z","size":3808,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T19:59:55.610Z","etag":null,"topics":["nodejs","prettier","rollup","vue-router","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QdabuliuQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-21T14:04:03.000Z","updated_at":"2024-05-09T04:02:13.000Z","dependencies_parsed_at":"2024-01-23T14:46:21.523Z","dependency_job_id":"a380e7bf-3d8a-42f1-bab0-e9ad01bf3288","html_url":"https://github.com/QdabuliuQ/Router-Builder","commit_stats":null,"previous_names":["qdabuliuq/auto-router"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/QdabuliuQ/Router-Builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FRouter-Builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FRouter-Builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FRouter-Builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FRouter-Builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QdabuliuQ","download_url":"https://codeload.github.com/QdabuliuQ/Router-Builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QdabuliuQ%2FRouter-Builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32034728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","prettier","rollup","vue-router","vuejs"],"created_at":"2024-11-12T22:18:20.425Z","updated_at":"2026-04-20T05:34:27.512Z","avatar_url":"https://github.com/QdabuliuQ.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Router-Builder Plugin 自动路由生成插件\n\n[npm](https://www.npmjs.com/package/router-builder) / [Github](https://github.com/QdabuliuQ/Router-Builder)\n\n`Router-Builder`可以根据文件目录，自动生成`vue-router`配置对象，页面文件夹的需要遵循一定的规则并且搭配`Router-Builder`进行使用。\n`Router-Builder`可以自动扫描约定好的文件目录结构，自动处理依赖导入关系，生成路由文件。\n\n`Router-Builder`支持文件夹的结构必须是嵌套，一级路由的页面的文件夹包含了二级路由页面的文件，依此类推。\n```\nviews\n├───PageA  // 一级页面文件夹\n│   │   index.vue  // 页面文件 文件名称可以是 index 或者通过 router.config.js 中的 fileName 属性指定\n│   └───PageAA  // 二级页面文件夹\n│           index.vue  // 页面文件\n├───PageB  // 一级页面文件夹\n│   │   index.vue\n│   └───PageBA\n│           index.vue\n└───PageC  // 一级页面文件夹\n    │   index.vue  // 页面文件\n    ├───PageCA  // 二级页面文件夹\n    │   │   index.vue  // 页面文件\n    │   ├───PageCAA  // 三级页面文件夹\n    │   │       index.vue  // 页面文件\n    │   └───PageCAB\n    │           index.vue\n    ├───PageCB\n    │       index.vue\n    └───PageCC\n            index.vue\n```\n所以可以通过`router-builder`自动生成`router`配置对象，目前`router-builder`只适用于`vue`。\n\n## 插件使用\n\n1. 插件安装，插件作为开发依赖安装到项目当中。\n   `npm i router-builder -D / npm install router-builder --save-dev`\n\n2. 在`src`同级目录下创建`router.config.js`配置文件。配置文件模板如下：\n```javascript\nmodule.exports = {\n  entry: \"/src/views\", // 读取文件路径入口\n  output: \"/src/router/router.js\", // 路由文件输出路径\n  importPrefix: \"@/views\", // 组件导入前缀\n  ignoreFolder: [\"components\", /child\\d/],  // 忽略匹配的文件夹 可以是字符串和正则\n  fileName: \"index\", // 文件夹下的文件名称，通常是页面文件\n};\n```\n\n3. 插件使用，在终端中输入命令：`npx router-builder`\n**当终端输出`router file generation successful!`则表示成功生成**\n\n## 插件配置\n\n1. 我们可以在根目录`package.json同级`创建`router.config.js` 文件可以对配置进行自定义，提高一定的灵活性。\n\n```js\nmodule.exports = {\n  entry: \"/src/views\", // 读取文件路径入口\n  output: \"/src/router/router.js\", // 路由文件输出路径\n  importPrefix: \"@/views\", // 组件导入前缀\n  ignoreFolder: [\"components\", /child\\d/],  // 忽略匹配的文件夹 可以是字符串和正则\n  fileName: \"index\", // 文件夹下的文件名称，通常是页面文件\n};\n```\n\n2. 如果一个页面希望配置成为一个路由页面，则可以在`.vue`文件夹中添加`\u003crouter\u003e\u003c/router\u003e`标签\n\n```html\n// router 标签包裹的内容就是页面路由配置\n\u003crouter\u003e title: 'home', meta: { info: \"home\" } \u003c/router\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003ehome\u003c/div\u003e\n\u003c/template\u003e\n\n// 一个页面也可以配置多个 router\n标签，表示该页面会生成多条路径指向该页面，在对于一个页面需要生成多条路由配置的时候，其 path\n属性必须添加。\n\u003crouter\u003e title: \"setting-child3-1\", path: \"/setting/child3-1\" \u003c/router\u003e\n\n\u003crouter\u003e title: \"setting-child3-2\", path: \"/setting/child3-2\" \u003c/router\u003e\n\n\u003crouter\u003e title: \"setting-child3-3\", path: \"/setting/child3-3\" \u003c/router\u003e\n```\n\n3. `router`的配置选项都可以写入到`\u003crouter\u003e\u003c/router\u003e`标签当中。\n\n4. 执行`npx router-builder`可以看到根据`output`选项配置的文件路径输出一个文件，改文件默认导出一个路由数组`export default [  ]`，将该文件导入到对应的路由配置文件当中使用即可。\n\n## \u003crouter\u003e参数\n\nrouter配置参数，可在以下参数以外继续添加，新增的参数并且不是内置的参数会并入`router`配置对象\n| 参数(params) | 必选(require) | 说明(description) | 类型(type) | 默认值(default) |\n| ------------- | ----------- |------------- |----------------------------- | ----------- |\n| `path` | `false` | 路由路径，当出现多个`\u003crouter\u003e`标签的时候则是必填 | `string` | - |\n| `name` | `true` | 路由路径，当出现多个`\u003crouter\u003e`标签的时候则是必填 | `string` | - |\n| `import` | `false` | 需要导入依赖的，可以配置`import`属性 | `{ [prop: string]: Array\u003cstring 或 { name: string, alias?: string, default?: boolean }` | - |\n| `webpackChunkName` | `false` | 导入语句分块注释 | `string` | - |\n| `module` | `false` | 添加`module`属性后，表示该文件的路由包括后续的子路由都会被抽离出来作为一个文件 | `string` | - |\n\n1. `\u003crouter\u003e\u003c/router\u003e`标签支持传入自定义参数，包含了`meta, name, 自定义参数`。\n\n2. 一个文件可以存在多个`\u003crouter\u003e\u003c/router\u003e`，这样意味着这个页面会生成多条路由路径指向该页面。\n\n```js\n\u003crouter\u003e\n  name: 'edit',\n  meta: {\n    title: 'edit'\n  }\n\u003c/router\u003e\n\u003crouter\u003e\n  name: 'add',\n  meta: {\n    title: 'add'\n  }\n\u003c/router\u003e\n\n// 输出\n{\n  name: \"edit\",\n  path: \"...\",\n  meta: {\n    title: \"edit\"\n  }\n},\n{\n  name: \"add\",\n  path: \"...\",\n  meta: {\n    title: \"add\"\n  }\n},\n```\n\n3. `\u003crouter\u003e webpackChunkName: \"chunkName\" \u003c/router\u003e`，可以添加固有参数`webpackChunkName`，组件就会在导入的时候自动添加该魔法注释：`component: () =\u003e import(/* webpackChunkName: \"配置的属性值\" */ \"path\")`。\n\n```js\n\u003crouter\u003e\n  webpackChunkName: \"chunkName\",\n\u003c/router\u003e\n\n// 输出\ncomponent: () =\u003e import(/* webpackChunkName: 'chunkName' */, \"path...\")\n```\n\n4. 也支持定义路由的导航守卫，直接写入函数内容即可\n\n```js\n\u003crouter\u003e\n  beforeEach: (to, from) =\u003e {}, beforeEach(to, from) {}, beforeEach: function(to, from) {}\n\u003c/router\u003e\n```\n\n5. `import`配置：如果在函数当中使用了第三方依赖或者需要导入的依赖，那么可以通过`import`配置对象生成`import`导入语句\n\n```js\nimport: {\n  '@/utils/index': [\n    'getDate',  // 默认导出属性\n    {\n      name: 'getType',  // 导出属性名称\n      alias: '_getType'  // 指定别名\n    },\n    {\n      name: 'getTime',  // 导出属性名称\n      default: true  // 指定为默认导出\n    }\n  ]\n}\n\n// 最终转为import语句\nimport getTime, { getDate, getType as _getType } from \"@/utils/index\"\n```\n\n6. `module`配置：当页面数量较多，需要将路由模块进行抽离的时候，可以添加上`module`属性，表示进行路由模块抽离，会创建`module`文件，然后自动实现导入和使用模块。\n\n```js\n\u003crouter\u003e\n  module: \"home\",\n  name: \"home\",\n  customProp: {\n    role: \"管理员\"\n  }\n\u003c/router\u003e\n\n// 输出\nimport home from \"./home.js\"\n\n{\n  home,\n}\n// home模块\nexport default {\n  name: \"home\",\n  customProp: {\n    role: \"管理员\"\n  }\n}\n```\n\n## 插件文件结构\n\n```\n│   .eslintignore \n│   .eslintrc.cjs\n│   .gitignore\n│   .prettierrc.json\n│   main.d.ts\n│   package-lock.json\n│   package.json\n│   README.md\n│   rollup.config.js\n│   tsconfig.json\n├───bin  构建后的文件目录\n│       index.cjs  运行文件\n└───src\n    │   dictContent.ts  目录读取\n    │   filesInfo.ts  文件内容读取\n    │   index.ts  入口文件\n    │   routerConfig.ts  生成路由配置\n    │   \n    ├───types  类型定义\n    │       filesInfo.ts\n    │       index.ts\n    │       \n    └───utils  工具函数\n            conveyFunction.ts  函数转字符串存储\n            dataType.ts  类型检验\n            fileReader.ts  文件读取函数\n            generateFile.ts   文件内容生成\n            getImportCode.ts   依赖导入语句\n            importCode.ts  导出语句函数\n            isRegExp.ts  正则校验\n            rootPath.ts  根路径\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdabuliuq%2Frouter-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqdabuliuq%2Frouter-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqdabuliuq%2Frouter-builder/lists"}