index.ts 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  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. // @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-ng'
  17. import { createSvgIconsPlugin as createSvgIconsPlugin1 } from 'vite-plugin-svg-icons'
  18. import UnoCSS from 'unocss/vite'
  19. export function createVitePlugins() {
  20. const root = process.cwd()
  21. // 路径查找
  22. function pathResolve(dir: string) {
  23. return resolve(root, '.', dir)
  24. }
  25. return [
  26. Vue(),
  27. VueJsx(),
  28. UnoCSS(),
  29. progress(),
  30. PurgeIcons(),
  31. ElementPlus({}),
  32. createSvgIconsPlugin1({
  33. // 指定需要缓存的图标文件夹
  34. iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
  35. // 指定symbolId格式
  36. symbolId: 'mt-edit-[name]',
  37. // 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
  38. svgoOptions: false,
  39. customDomId: '___mt__edit__icons__dom__'
  40. }),
  41. AutoImport({
  42. include: [
  43. /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
  44. /\.vue$/,
  45. /\.vue\?vue/, // .vue
  46. /\.md$/ // .md
  47. ],
  48. imports: [
  49. 'vue',
  50. 'vue-router',
  51. // 可额外添加需要 autoImport 的组件
  52. {
  53. '@/hooks/web/useI18n': ['useI18n'],
  54. '@/hooks/web/useMessage': ['useMessage'],
  55. '@/hooks/web/useTable': ['useTable'],
  56. '@/hooks/web/useCrudSchemas': ['useCrudSchemas'],
  57. '@/utils/formRules': ['required'],
  58. '@/utils/dict': ['DICT_TYPE']
  59. }
  60. ],
  61. dts: 'src/types/auto-imports.d.ts',
  62. resolvers: [ElementPlusResolver()],
  63. eslintrc: {
  64. enabled: false, // Default `false`
  65. filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
  66. globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  67. }
  68. }),
  69. Components({
  70. // 生成自定义 `auto-components.d.ts` 全局声明
  71. dts: 'src/types/auto-components.d.ts',
  72. // 自定义组件的解析器
  73. resolvers: [ElementPlusResolver()],
  74. globs: [
  75. 'src/components/**/**.{vue, md}',
  76. '!src/components/DiyEditor/components/mobile/**',
  77. '!src/components/mt-dzr/**',
  78. '!src/components/mt-preview/**',
  79. '!src/components/mt-edit/**',
  80. '!src/components/custom-components/**'
  81. ]
  82. }),
  83. EslintPlugin({
  84. cache: false,
  85. include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
  86. }),
  87. VueI18nPlugin({
  88. runtimeOnly: true,
  89. compositionOnly: true,
  90. include: [resolve(__dirname, 'src/locales/**')]
  91. }),
  92. createSvgIconsPlugin({
  93. iconDirs: [pathResolve('src/assets/svgs')],
  94. symbolId: 'icon-[dir]-[name]'
  95. }),
  96. viteCompression({
  97. verbose: true, // 是否在控制台输出压缩结果
  98. disable: false, // 是否禁用
  99. threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
  100. algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
  101. ext: '.gz', // 生成的压缩包后缀
  102. deleteOriginFile: false //压缩后是否删除源文件
  103. }),
  104. ViteEjsPlugin(),
  105. topLevelAwait({
  106. // https://juejin.cn/post/7152191742513512485
  107. // The export name of top-level await promise for each chunk module
  108. promiseExportName: '__tla',
  109. // The function to generate import names of top-level await promise in each chunk module
  110. promiseImportName: (i) => `__tla_${i}`
  111. })
  112. ]
  113. }