index.ts 3.9 KB

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