import type { PluginOption } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import VueMacros from 'vue-macros/vite' import viteCompression from 'vite-plugin-compression' import VueDevTools from 'vite-plugin-vue-devtools' import UnoCSS from 'unocss/vite' import AutoImport from 'unplugin-auto-import/vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' import type { ImportMetaEnv } from './env' /** * 创建 vite 插件 * @param ImportMetaEnv */ export const createVitePlugins = (viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] => { const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_DEVTOOLS, VITE_CODEINSPECTOR } = viteEnv return [ VueMacros({ plugins: { vue: vue(), // vue 可以使用 jsx/tsx 语法 vueJsx: vueJsx(), }, }), UnoCSS(), // NaiveUi 按需引入 AutoImport({ imports: [ 'vue', { 'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar', 'useModal'], }, ], dts: 'src/types/auto-imports.d.ts', }), Components({ resolvers: [NaiveUiResolver()], // dts: 'src/types/components.d.ts', dts: false, }), // vue devTools VITE_DEVTOOLS === 'true' && VueDevTools({ launchEditor: 'code' }), // 创建打包压缩配置 createCompression(viteEnv), // 查看配置信息 // { // name: 'debug-config', // configResolved(config) { // console.log('🚀 Vite Final Config:', config) // }, // }, // 查看中间件信息 { name: 'inspect-middleware', configureServer(server) { console.log('🔍 Middlewares:') server.middlewares.stack.forEach((layer, i) => { const route = layer.route || '(root)' const name = 'name' in layer.handle ? layer.handle['name'] : '(anonymous)' const handleType = typeof layer.handle console.log(`${i + 1}. [${route}] → ${name} (${handleType})`) }) }, }, // 中间件监控 // { // name: 'middleware-tracker', // configureServer(server) { // const stack = server.middlewares.stack // stack.forEach((layer, i) => { // const originalHandle = layer.handle // const name = originalHandle.name || `(anonymous-${i})` // const handleInfo = originalHandle.toString() // layer.handle = function wrappedHandle(req, res, next) { // console.log(`🔥 Middleware [${name}] triggered by: ${req.method} ${req.url}`) // // if (!originalHandle.name) console.log(`handleInfo: ${handleInfo}`) // return originalHandle(req, res, next) // } // }) // }, // }, ] } /** * @description 根据 compress 配置,生成不同的压缩规则 * @param ImportMetaEnv */ const createCompression = (viteEnv: ImportMetaEnv): PluginOption | PluginOption[] => { const { VITE_BUILD_COMPRESS = 'none', VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv const compressList = VITE_BUILD_COMPRESS.split(',') const plugins: PluginOption[] = [] if (compressList.includes('gzip')) { plugins.push( viteCompression({ ext: '.gz', algorithm: 'gzip', deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE === 'true', }), ) } if (compressList.includes('brotli')) { plugins.push( viteCompression({ ext: '.br', algorithm: 'brotliCompress', deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE === 'true', }), ) } return plugins }