vuerouter-build-vite-plugin

用于 根据指定文件目录自动生成路由文件

特征

只会将 ${config.include}**/index.vue文件结构生成为路由文件

假设 ${config.include} 的目录结构如下：

src/pages/
--| user/
-----| index.vue
--|@ignore/
-----| index.vue
--| index.vue

那么，plugin自动生成的路由文件如下：(@文件将忽略，见配置)

src/router/modules/
--| user.ts

user.ts

//文件为插件产生 原则上只允许修改路由参数   
export default {
    name: "user",
    path: "/user",
    component:  import(`${config.include}/user/index.vue`),
    redirect: "",
    children: [],
    meta: {},
}

安装

node version: >=12.0.0 vite version: >=2.0.0

yarn add vuerouter-build-vite-plugin --dev

使用

• vite.config.ts 中的配置插件

import vuerouterBuildPlugin from 'vuerouter-build-vite-plugin';
export default defineConfig({
  plugins: [vuerouterBuildPlugin({ 
    includeFilePrefix: '_',
    routeRewrite(route, level) {
      // 第一层使用routerView
      if(level == 1) {
        route.component = `RouterView:var`
      }
      return route;
    },
    mouduleImport(route) {
      return ([
        `import RouterView from '/src/layout/RouterView.vue';`,
      ]);
    },
    fileTopLoad(left) {
      return left;
    }
  })]
})

配置说明

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ---------------------- | --------------------- | -------------------------------------------------------------- | | path | string | src/router/modules/ | 需要生成路由文件的指定目录 | | include | string | src/page | 该目录下的文件变动会生成路由文件 | | ignoreFilePrefix | string | @ |该前缀的文件夹下的所有文件会被忽略生成路由文件 | | includeFilePrefix(1.1.4新增) | string | |默认为空，设置该参数时只有包含该前缀的文件才会生成路由文件(为了减小插件入侵影响，建议设置该参数) | | moduleTarget | string | Module_ | 该前缀的文件夹下的文件将被单独产生一个文件夹作为路由模块，而不是单一的路由文件但是该文件夹不会作为路由对一部分 | | moduleRouterTarget | string | Module_r_ | 该前缀的文件夹下的文件将被单独产生一个文件夹作为路由模块，而不是单一的路由文，与moduleTarget不同的是moduleRouterTarget将该文件夹也作为路由的一部分 | | format | string | ts |路由文件格式 | | routeRewrite | function | (router, level)=> router |可重写路由对象 | | fileTopLoad | function | file => file |路由文件重写，文件路由对象顶层部分将被重写 | | mouduleImport | function | router:Array<string> => router |为路由文件导入模块，功能类似于fileLoad，但是fileLoad不仅限于导入模块 |