vite.config.ts 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import { resolve } from 'path'
  2. import { loadEnv } from 'vite'
  3. import type { UserConfig, ConfigEnv } from 'vite'
  4. import Vue from '@vitejs/plugin-vue'
  5. import WindiCSS from 'vite-plugin-windicss'
  6. import VueJsx from '@vitejs/plugin-vue-jsx'
  7. import EslintPlugin from 'vite-plugin-eslint'
  8. import VueI18n from '@intlify/vite-plugin-vue-i18n'
  9. import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import'
  10. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  11. import PurgeIcons from 'vite-plugin-purge-icons'
  12. import { createHtmlPlugin } from 'vite-plugin-html'
  13. import viteCompression from 'vite-plugin-compression'
  14. // 当前执行node命令时文件夹的地址(工作目录)
  15. const root = process.cwd()
  16. // 路径查找
  17. function pathResolve(dir: string) {
  18. return resolve(root, '.', dir)
  19. }
  20. // https://vitejs.dev/config/
  21. export default ({ command, mode }: ConfigEnv): UserConfig => {
  22. let env = {} as any
  23. const isBuild = command === 'build'
  24. if (!isBuild) {
  25. env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
  26. } else {
  27. env = loadEnv(mode, root)
  28. }
  29. return {
  30. base: env.VITE_BASE_PATH,
  31. root: root,
  32. // 服务端渲染
  33. server: {
  34. // 是否开启 https
  35. https: false,
  36. // 端口号
  37. port: env.VITE_PORT,
  38. host: "0.0.0.0",
  39. open: env.VITE_OPEN,
  40. // 本地跨域代理
  41. proxy: {
  42. ['/dev-api']: {
  43. target: env.VITE_BASE_URL,
  44. ws: false,
  45. changeOrigin: true,
  46. rewrite: (path) => path.replace(new RegExp(`^/dev-api`), ''),
  47. },
  48. },
  49. },
  50. plugins: [
  51. Vue(),
  52. VueJsx(),
  53. WindiCSS(),
  54. createStyleImportPlugin({
  55. resolves: [ElementPlusResolve(),VxeTableResolve()],
  56. libs: [{
  57. libraryName: 'element-plus',
  58. esModule: true,
  59. resolveStyle: (name) => {
  60. return `element-plus/es/components/${name.substring(3)}/style/css`
  61. }
  62. },{
  63. libraryName: 'vxe-table',
  64. esModule: true,
  65. resolveStyle: (name) => {
  66. return `vxe-table/es/${name}/style.css`
  67. }
  68. }]
  69. }),
  70. EslintPlugin({
  71. cache: false,
  72. include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
  73. }),
  74. VueI18n({
  75. runtimeOnly: true,
  76. compositionOnly: true,
  77. include: [resolve(__dirname, 'src/locales/**')]
  78. }),
  79. createSvgIconsPlugin({
  80. iconDirs: [pathResolve('src/assets/svgs')],
  81. symbolId: 'icon-[dir]-[name]',
  82. svgoOptions: true
  83. }),
  84. PurgeIcons(),
  85. viteCompression({
  86. verbose: true, // 是否在控制台输出压缩结果
  87. disable: true, // 是否禁用
  88. threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
  89. algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
  90. ext: '.gz', // 生成的压缩包后缀
  91. deleteOriginFile: false //压缩后是否删除源文件
  92. }),
  93. createHtmlPlugin({
  94. inject: {
  95. data: {
  96. title: env.VITE_APP_TITLE,
  97. injectScript: `<script src="./inject.js"></script>`
  98. }
  99. }
  100. })
  101. ],
  102. css: {
  103. preprocessorOptions: {
  104. less: {
  105. additionalData: '@import "./src/styles/variables.module.less";',
  106. javascriptEnabled: true
  107. }
  108. }
  109. },
  110. resolve: {
  111. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
  112. alias: [
  113. {
  114. find: 'vue-i18n',
  115. replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
  116. },
  117. {
  118. find: /\@\//,
  119. replacement: `${pathResolve('src')}/`
  120. }
  121. ]
  122. },
  123. build: {
  124. minify: 'terser',
  125. outDir: env.VITE_OUT_DIR || 'dist',
  126. sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false,
  127. // brotliSize: false,
  128. terserOptions: {
  129. compress: {
  130. drop_debugger: env.VITE_DROP_DEBUGGER === 'true',
  131. drop_console: env.VITE_DROP_CONSOLE === 'true'
  132. }
  133. }
  134. },
  135. optimizeDeps: {
  136. include: [
  137. 'vue',
  138. 'vue-router',
  139. 'vue-types',
  140. 'vue-i18n',
  141. 'vxe-table',
  142. 'xe-utils',
  143. 'element-plus/es',
  144. 'element-plus/es/locale/lang/zh-cn',
  145. 'element-plus/es/locale/lang/en',
  146. '@iconify/iconify',
  147. '@vueuse/core',
  148. 'axios',
  149. 'qs',
  150. 'dayjs',
  151. 'echarts',
  152. 'echarts-wordcloud',
  153. 'intro.js',
  154. 'qrcode',
  155. 'pinia',
  156. 'crypto-js',
  157. '@wangeditor/editor',
  158. '@wangeditor/editor-for-vue'
  159. ]
  160. }
  161. }
  162. }