VUE3+VITE+TS自动导入路由

安装依赖

首先这个自动生成路由的插件叫vite-plugin-pages，使用它的时候需要配合vue-router

npm install vite-plugin-pages -D
npm install vue-router -D

创建文件

我自己的目录结构是在根目录下创建了一个用于配置vite.confi.js的文件夹

-config
	-vite
		-plugins
			-components.ts
			-autoImport.ts
			-index.ts
			-pages.ts

编写配置

// 动态生成路由
import Pages from 'vite-plugin-pages'

export const ConfigPagesPlugin = () => {
  return Pages({
    pagesDir: [{ dir: 'src/pages', baseRoute: '' }], // 生成路由的文件夹
    extensions: ['vue', 'md'],
    exclude: ['**/components/*.vue'], // 排除一些不需要的文件夹
    nuxtStyle: true //是否相似路由风格
  })
}

引入index.ts

import { PluginOption, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import VitePluginCertificate from 'vite-plugin-mkcert'
import { createHtmlPlugin } from 'vite-plugin-html'
import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
import { AutoImportDeps } from './autoImport '
import { ConfigPagesPlugin } from './pages'
import { AutoRegistryComponents } from './components'

export function createVitePlugins(mode) {
  const envConfig = loadEnv(mode, process.cwd())

  const vitePlugins: (PluginOption | PluginOption[])[] = [
    // vue支持
    vue(),
    // JSX支持
    vueJsx(),
    // setup语法糖组件名支持
    vueSetupExtend(),
    // 提供https证书
    VitePluginCertificate({
      source: 'coding'
    }),
    createHtmlPlugin({
      minify: true,
      entry: 'src/main.ts',
      template: '/index.html',
      inject: {
        data: {
          title: envConfig.VITE_APP_TITLE,
          icon: envConfig.VITE_APP_LOGO
        }
      }
    }),
    // 打包分析工具
    visualizer(),
    // 打包工具
    viteCompression({
      // 生成压缩包
      verbose: true, // 输出压缩成功,
      disable: false,
      threshold: 1,
      algorithm: 'gzip',
      ext: '.gz'
    })
  ]
  // 自动导入依赖
  vitePlugins.push(AutoImportDeps())

  // 动态生成路由
  vitePlugins.push(ConfigPagesPlugin())

  // 自动导入组件
  vitePlugins.push(AutoRegistryComponents())

  console.log('hahhaha')

  return vitePlugins
}

vite.config.ts内使用

请看我之前的自动引入组件文章

创建路由文件夹，注册路由

在src文件夹下创建router文件夹并创建index.ts文件
注册路由

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from 'virtual:generated-pages'

routes.push({
  path: '/',
  redirect: '/ComprehensiveSituation'
})
console.log('1235646', routes)
// 导入生成的路由数据
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

这个满足于一个页面一个路由的情况，如果像管理系统就需要用vite-plugin-vue-layouts插件
页面可以自由组合布局，可以在页面加载指定的layout，这个之后我再写一个