vite-vue-router-components

vite vue 路由懒加载自动化生成插件

1、 安装

With NPM:

$ npm install vite-vue-router-components --save-dev

With Yarn:

$ yarn install vite-vue-router-components --save-dev

With PNPM:

$ pnpm add vite-vue-router-components --save-dev

With Bun:

$ bun install vite-vue-router-components --save-dev

2、配置参数

支持配置以下参数

interface Options {
  /**
   * 目录路径
   */
  directory: string | string[]

  /**
   * 排除目录
   */
  exclude: string[]

  /**
   * 声明文件生成目录
   */
  dts?: string

  /**
   * 属性名称 folder以文件夹为名称  file文件为名称
   */
  attributeName?: 'folder' | 'file'
}

3、使用

在 vite.config.ts 中配置

...
import VitePluginVue3RouterComponents from '../dist/index'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...,
    VitePluginVue3RouterComponents({
    directory: './src/views',
    exclude: [],
  })],
})

项目中使用

import constantRouterComponents from 'virtual:router-components'

4、生成的文件

在运行项目时 将默认会在根目录生成一个 router-components.d.ts 文件 可通过配置 dts 参数修改生成目录及文件名