vite.config.ts 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. import { defineConfig, loadEnv } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from 'path'
  4. import { fileURLToPath } from 'url'
  5. import vueDevTools from 'vite-plugin-vue-devtools'
  6. import viteCompression from 'vite-plugin-compression'
  7. import Components from 'unplugin-vue-components/vite'
  8. import AutoImport from 'unplugin-auto-import/vite'
  9. import ElementPlus from 'unplugin-element-plus/vite'
  10. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  11. import { VantResolver } from '@vant/auto-import-resolver'
  12. import tailwindcss from '@tailwindcss/vite'
  13. // import { visualizer } from 'rollup-plugin-visualizer'
  14. export default ({ mode }: { mode: string }) => {
  15. const root = process.cwd()
  16. const env = loadEnv(mode, root)
  17. const { VITE_VERSION, VITE_PORT, VITE_BASE_URL, VITE_API_URL, VITE_API_PROXY_URL } = env
  18. console.log(`🚀 API_URL = ${VITE_API_URL}`)
  19. console.log(`🚀 VERSION = ${VITE_VERSION}`)
  20. return defineConfig({
  21. define: {
  22. __APP_VERSION__: JSON.stringify(VITE_VERSION),
  23. // html-to-docx 等依赖会读 Node 全局;浏览器映射到 globalThis
  24. global: 'globalThis'
  25. },
  26. base: VITE_BASE_URL,
  27. server: {
  28. port: Number(VITE_PORT),
  29. proxy: {
  30. '/api': {
  31. target: VITE_API_PROXY_URL,
  32. changeOrigin: true
  33. },
  34. // Web端接口代理 - 转发到后端 /api 前缀
  35. '/web': {
  36. target: 'http://192.168.2.178:8000/api',
  37. changeOrigin: true,
  38. rewrite: (path) => `/api${path}`
  39. },
  40. // 小程序端接口代理
  41. '/mini': {
  42. target: 'http://192.168.2.178:8000/api',
  43. changeOrigin: true,
  44. rewrite: (path) => `/api${path}`
  45. }
  46. },
  47. host: true
  48. },
  49. // 路径别名
  50. resolve: {
  51. alias: {
  52. '@': fileURLToPath(new URL('./src', import.meta.url)),
  53. '@views': resolvePath('src/views'),
  54. '@imgs': resolvePath('src/assets/images'),
  55. '@icons': resolvePath('src/assets/icons'),
  56. '@utils': resolvePath('src/utils'),
  57. '@stores': resolvePath('src/store'),
  58. '@styles': resolvePath('src/assets/styles'),
  59. // 合同 Word 导出:强制 browser 构建,避免 Vite 落到 Node ESM
  60. '@turbodocx/html-to-docx': resolvePath(
  61. 'node_modules/@turbodocx/html-to-docx/dist/html-to-docx.browser.esm.js'
  62. ),
  63. buffer: 'buffer/'
  64. }
  65. },
  66. build: {
  67. target: 'es2015',
  68. outDir: 'dist',
  69. chunkSizeWarningLimit: 2000,
  70. // 关闭构建末尾 gzip 体积统计,避免大项目在该阶段 OOM
  71. reportCompressedSize: false,
  72. minify: 'terser',
  73. terserOptions: {
  74. compress: {
  75. // 生产环境去除 console
  76. drop_console: true,
  77. // 生产环境去除 debugger
  78. drop_debugger: true
  79. }
  80. },
  81. dynamicImportVarsOptions: {
  82. warnOnError: true,
  83. exclude: [],
  84. include: ['src/views/**/*.vue']
  85. }
  86. },
  87. plugins: [
  88. vue(),
  89. tailwindcss(),
  90. // 自动按需导入 API
  91. AutoImport({
  92. imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
  93. dts: 'src/types/import/auto-imports.d.ts',
  94. resolvers: [ElementPlusResolver()],
  95. eslintrc: {
  96. enabled: true,
  97. filepath: './.auto-import.json',
  98. globalsPropValue: true
  99. }
  100. }),
  101. // 自动按需导入组件
  102. Components({
  103. dts: 'src/types/import/components.d.ts',
  104. resolvers: [
  105. (componentName) => {
  106. if (componentName === 'ElTag') {
  107. return { name: 'default', from: '@/utils/patch-el-tag-empty' }
  108. }
  109. },
  110. ElementPlusResolver(),
  111. VantResolver()
  112. ]
  113. }),
  114. // 按需定制主题配置
  115. ElementPlus({
  116. useSource: true
  117. }),
  118. // 压缩
  119. viteCompression({
  120. verbose: false, // 是否在控制台输出压缩结果
  121. disable: false, // 是否禁用
  122. algorithm: 'gzip', // 压缩算法
  123. ext: '.gz', // 压缩后的文件名后缀
  124. threshold: 10240, // 只有大小大于该值的资源会被处理 10240B = 10KB
  125. deleteOriginFile: false // 压缩后是否删除原文件
  126. }),
  127. vueDevTools()
  128. // 打包分析
  129. // visualizer({
  130. // open: true,
  131. // gzipSize: true,
  132. // brotliSize: true,
  133. // filename: 'dist/stats.html' // 分析图生成的文件名及路径
  134. // }),
  135. ],
  136. // 依赖预构建:避免运行时重复请求与转换,提升首次加载速度
  137. optimizeDeps: {
  138. include: [
  139. 'echarts/core',
  140. 'echarts/charts',
  141. 'echarts/components',
  142. 'echarts/renderers',
  143. 'xlsx',
  144. 'xgplayer',
  145. 'crypto-js',
  146. 'file-saver',
  147. 'buffer',
  148. 'vue-img-cutter',
  149. 'element-plus/es',
  150. 'element-plus/es/components/*/style/css',
  151. 'element-plus/es/components/*/style/index'
  152. ]
  153. },
  154. css: {
  155. preprocessorOptions: {
  156. // sass variable and mixin
  157. scss: {
  158. additionalData: `
  159. @use "@styles/core/el-light.scss" as *;
  160. @use "@styles/core/mixin.scss" as *;
  161. `
  162. }
  163. },
  164. postcss: {
  165. plugins: [
  166. {
  167. postcssPlugin: 'internal:charset-removal',
  168. AtRule: {
  169. charset: (atRule) => {
  170. if (atRule.name === 'charset') {
  171. atRule.remove()
  172. }
  173. }
  174. }
  175. }
  176. ]
  177. }
  178. }
  179. })
  180. }
  181. function resolvePath(paths: string) {
  182. return path.resolve(__dirname, paths)
  183. }