vite.config.ts 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import path from 'path'
  2. import { readdirSync } from 'fs'
  3. import { defineConfig } from 'vite'
  4. import Vue from '@vitejs/plugin-vue'
  5. import VueJsx from '@vitejs/plugin-vue-jsx'
  6. import DefineOptions from 'unplugin-vue-define-options/vite'
  7. import AutoImport from 'unplugin-auto-import/vite'
  8. import Unocss from 'unocss/vite'
  9. import libCss from 'vite-plugin-libcss'
  10. import { presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'
  11. import Component from 'unplugin-vue-components/vite'
  12. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  13. import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
  14. const resolve = p => path.resolve(__dirname, p)
  15. export default defineConfig({
  16. resolve: {
  17. alias: {
  18. '@/': `${resolve('src')}/`,
  19. },
  20. },
  21. plugins: [
  22. Vue({
  23. reactivityTransform: true,
  24. }),
  25. DefineOptions(),
  26. VueJsx(),
  27. libCss(),
  28. AutoImport({
  29. imports: [
  30. 'vue',
  31. '@vueuse/core',
  32. ],
  33. dts: resolve('src/auto-imports.d.ts'),
  34. }),
  35. Component({
  36. resolvers: [
  37. ElementPlusResolver(),
  38. ],
  39. dts: resolve('src/components.d.ts'),
  40. }),
  41. Unocss({
  42. mode: 'dist-chunk',
  43. theme: {
  44. colors: {
  45. blue: { 500: '#409EFF' },
  46. },
  47. },
  48. transformers: [
  49. transformerDirectives(),
  50. ],
  51. safelist: [...readdirSync(path.resolve(__dirname, 'src/assets/icons')).map(i => `custom:${i.split('.')[0]}`)],
  52. presets: [
  53. presetUno(),
  54. presetIcons({
  55. prefix: '',
  56. extraProperties: {
  57. 'display': 'inline-block',
  58. 'vertical-align': 'middle',
  59. 'font-size': '14px',
  60. },
  61. scale: 1.2,
  62. collections: {
  63. custom: FileSystemIconLoader(
  64. path.resolve(__dirname, 'src/assets/icons'),
  65. (svg) => {
  66. svg = svg.replace(/^<\?xml.*?<svg/, '<svg')
  67. if (svg.includes('fill="#')) return svg
  68. return svg.replace(/^<svg /, '<svg fill="currentColor" ')
  69. },
  70. ),
  71. },
  72. }),
  73. presetAttributify(),
  74. ],
  75. }),
  76. ],
  77. build: {
  78. lib: {
  79. entry: path.resolve(__dirname, 'src/index.ts'),
  80. formats: ['es'],
  81. fileName: format => `index.${format}.js`,
  82. },
  83. reportCompressedSize: false,
  84. sourcemap: true,
  85. cssCodeSplit: true,
  86. rollupOptions: {
  87. external: [
  88. 'vue',
  89. 'element-plus',
  90. 'vuedraggable',
  91. ],
  92. output: {
  93. globals: {
  94. 'vue': 'Vue',
  95. 'element-plus': 'ElementPlus',
  96. 'vuedraggable': 'vuedraggable',
  97. },
  98. },
  99. },
  100. }
  101. })