index.ts 3.7 KB

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