| 提交 | 用户 | 时间 | ||
| 314507 | 1 | import { resolve } from 'path' |
| H | 2 | import Vue from '@vitejs/plugin-vue' |
| 3 | import VueJsx from '@vitejs/plugin-vue-jsx' | |
| 4 | import progress from 'vite-plugin-progress' | |
| 5 | import EslintPlugin from 'vite-plugin-eslint' | |
| 6 | import PurgeIcons from 'vite-plugin-purge-icons' | |
| 7 | import { ViteEjsPlugin } from 'vite-plugin-ejs' | |
| 8 | // @ts-ignore | |
| 9 | import ElementPlus from 'unplugin-element-plus/vite' | |
| 10 | import AutoImport from 'unplugin-auto-import/vite' | |
| 11 | import Components from 'unplugin-vue-components/vite' | |
| 12 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' | |
| 13 | import viteCompression from 'vite-plugin-compression' | |
| 14 | import topLevelAwait from 'vite-plugin-top-level-await' | |
| 15 | import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' | |
| 16 | import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' | |
| 17 | import UnoCSS from 'unocss/vite' | |
| 18 | ||
| 19 | export function createVitePlugins() { | |
| 20 | const root = process.cwd() | |
| 21 | ||
| 22 | // 路径查找 | |
| 23 | function pathResolve(dir: string) { | |
| 24 | return resolve(root, '.', dir) | |
| 25 | } | |
| 26 | ||
| 27 | return [ | |
| 28 | Vue(), | |
| 29 | VueJsx(), | |
| 30 | UnoCSS(), | |
| 31 | progress(), | |
| 32 | PurgeIcons(), | |
| 33 | ElementPlus({}), | |
| 34 | AutoImport({ | |
| 35 | include: [ | |
| 36 | /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx | |
| 37 | /\.vue$/, | |
| 38 | /\.vue\?vue/, // .vue | |
| 39 | /\.md$/ // .md | |
| 40 | ], | |
| 41 | imports: [ | |
| 42 | 'vue', | |
| 43 | 'vue-router', | |
| 44 | // 可额外添加需要 autoImport 的组件 | |
| 45 | { | |
| 46 | '@/hooks/web/useI18n': ['useI18n'], | |
| 47 | '@/hooks/web/useMessage': ['useMessage'], | |
| 48 | '@/hooks/web/useTable': ['useTable'], | |
| 49 | '@/hooks/web/useCrudSchemas': ['useCrudSchemas'], | |
| 50 | '@/utils/formRules': ['required'], | |
| 51 | '@/utils/dict': ['DICT_TYPE'] | |
| 52 | } | |
| 53 | ], | |
| 54 | dts: 'src/types/auto-imports.d.ts', | |
| 55 | resolvers: [ElementPlusResolver()], | |
| 56 | eslintrc: { | |
| 57 | enabled: false, // Default `false` | |
| 58 | filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` | |
| 59 | globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') | |
| 60 | } | |
| 61 | }), | |
| 62 | Components({ | |
| 63 | // 生成自定义 `auto-components.d.ts` 全局声明 | |
| 64 | dts: 'src/types/auto-components.d.ts', | |
| 65 | // 自定义组件的解析器 | |
| 66 | resolvers: [ElementPlusResolver()], | |
| 67 | globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**'] | |
| 68 | }), | |
| 69 | EslintPlugin({ | |
| 70 | cache: false, | |
| 71 | include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件 | |
| 72 | }), | |
| 73 | VueI18nPlugin({ | |
| 74 | runtimeOnly: true, | |
| 75 | compositionOnly: true, | |
| 76 | include: [resolve(__dirname, 'src/locales/**')] | |
| 77 | }), | |
| 78 | createSvgIconsPlugin({ | |
| 79 | iconDirs: [pathResolve('src/assets/svgs')], | |
| 80 | symbolId: 'icon-[dir]-[name]', | |
| 81 | svgoOptions: true | |
| 82 | }), | |
| 83 | viteCompression({ | |
| 84 | verbose: true, // 是否在控制台输出压缩结果 | |
| 85 | disable: false, // 是否禁用 | |
| 86 | threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b | |
| 87 | algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw'] | |
| 88 | ext: '.gz', // 生成的压缩包后缀 | |
| 89 | deleteOriginFile: false //压缩后是否删除源文件 | |
| 90 | }), | |
| 91 | ViteEjsPlugin(), | |
| 92 | topLevelAwait({ | |
| 93 | // https://juejin.cn/post/7152191742513512485 | |
| 94 | // The export name of top-level await promise for each chunk module | |
| 95 | promiseExportName: '__tla', | |
| 96 | // The function to generate import names of top-level await promise in each chunk module | |
| 97 | promiseImportName: (i) => `__tla_${i}` | |
| 98 | }) | |
| 99 | ] | |
| 100 | } | |
