@systemlight/auto-route-webpack-plugin

Webpack plug-in that traverses the directory to generate information.

• 灵感来源

路由规则

默认文件忽略规则

• 以 . 或 _ 开头的文件或目录
• 以 d.ts 结尾的类型定义文件
• 包含 test、spec、e2e 的测试文件（适用于 .js、.jsx 和 .tsx 文件）
• components 和 component 目录
• utils 和 util 目录
• 不是 .js、.jsx、.ts 或 .tsx 文件

动态路由

约定 [] 包裹的文件或文件夹为动态路由。

比如：

src/pages/users/[id].tsx 会成为 /users/:id
src/pages/users/[id]/settings.tsx 会成为 /users/:id/settings

约定 [ $] 包裹的文件或文件夹为动态可选路由

嵌套路由

约定目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout

使用方法

配置webpack

1// 内置了一个vue路由渲染器
2const {AutoRouteWebpackPlugin, vueRoutesRender} = require('@systemlight/auto-route-webpack-plugin')
3
4module.exports = {
5    ...
6
7    plugins: [
8      new AutoRouteWebpackPlugin({
9        targetPath: './src/views',
10        importPath: '@/views',
11        loaderTest: /routes\/index\.js$/,
12        routesRender: vueRoutesRender
13      })
14    ]
15
16  ...
17}

配置vue.config.js

1const {AutoRouteWebpackPlugin, vueRoutesRender} = require('@systemlight/auto-route-webpack-plugin')
2
3{
4  configureWebpack:{
5    plugins: [
6      new AutoRouteWebpackPlugin({
7        targetPath: './src/views',
8        importPath: '@/views',
9        loaderTest: /routes\/index\.js$/,
10        routesRender: vueRoutesRender
11      })
12    ]
13  }
14}

routes 文件添加标记

1// https://v3.router.vuejs.org/zh/api/
2const router = new VueRouter({
3  base: '/',
4  mode: 'history',
5  routes: [
6    // @auto-routes
7    {
8      name: '404',
9      path: '/:pathMatch(.*)',
10      alias: '/404',
11      component: Code404
12    }
13  ]
14})
15
16export default router

配置参数

• targetPath：扫描文件的路径，根据此目录下的文件生成路由
• importPath：导入的前缀路径，如@/views
• publicPath：目录的访问前缀
• ignores：通用忽略正则表达式数组
• ignoreFiles：文件忽略正则表达式数组
• ignoreFolders：文件夹忽略正则表达式数组
• renderRoute：渲染路由函数
• loaderTest：用于路由注入位置，文件内需要包含// @auto-routes标记用来替换生成的路由