安装依赖
首先这个自动生成路由的插件叫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,这个之后我再写一个