vite.config.ts 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import vue from '@vitejs/plugin-vue';
  2. import { resolve } from 'path';
  3. import { defineConfig, loadEnv, ConfigEnv } from 'vite';
  4. import vueSetupExtend from 'vite-plugin-vue-setup-extend';
  5. import AutoImport from 'unplugin-auto-import/vite';
  6. import topLevelAwait from 'vite-plugin-top-level-await';
  7. import { createStyleImportPlugin, VxeTableResolve } from 'vite-plugin-style-import';
  8. import viteCompression from 'vite-plugin-compression';
  9. // @ts-ignore
  10. import { svgBuilder } from '/@/components/IconSelector/index';
  11. import dns from 'node:dns'
  12. dns.setDefaultResultOrder('verbatim')
  13. const pathResolve = (dir: string) => {
  14. return resolve(__dirname, '.', dir);
  15. };
  16. const alias: Record<string, string> = {
  17. '/@': pathResolve('./src/'),
  18. 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
  19. };
  20. const viteConfig = defineConfig((mode: ConfigEnv) => {
  21. const env = loadEnv(mode.mode, process.cwd());
  22. // 判断是否开发环境
  23. const isDev = env.ENV === 'development'
  24. return {
  25. plugins: [
  26. vue(), // Vue 插件
  27. svgBuilder('./src/assets/icons/'), // 将 SVG 文件转换成 Vue 组件
  28. vueSetupExtend(), // setup语法糖增强插件
  29. AutoImport({
  30. imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
  31. dts: './auto-imports.d.ts', // 自动导入类型定义文件路径
  32. }),
  33. createStyleImportPlugin({
  34. resolves: [VxeTableResolve()], // 配置vxetable 按需加载
  35. }),
  36. topLevelAwait({
  37. promiseExportName: '__tla', // TLA Promise 变量名
  38. promiseImportName: (i) => `__tla_${i}`, // TLA Promise 导入名
  39. }),
  40. viteCompression({
  41. deleteOriginFile: false, // 压缩后删除原来的文件
  42. }),
  43. ],
  44. root: process.cwd(), // 项目根目录
  45. resolve: { alias }, // 路径别名配置
  46. base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
  47. optimizeDeps: {
  48. include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en'],
  49. },
  50. server: {
  51. host: '0.0.0.0', // 服务器地址
  52. port: env.VITE_PORT as unknown as number, // 服务器端口号
  53. open: env.VITE_OPEN === 'true', // 是否自动打开浏览器
  54. allowedHosts: true, // 允许所有域名和IP访问
  55. hmr: true, // 启用热更新
  56. proxy: {
  57. '/api': {
  58. target: env.VITE_ADMIN_PROXY_PATH, // 目标服务器地址
  59. ws: true, // 是否启用 WebSocket
  60. changeOrigin: true, // 是否修改请求头中的 Origin 字段
  61. rewrite: (path) => path.replace(/^\/api/, ''),
  62. },
  63. '^/ws/info/.*': {
  64. target: env.VITE_ADMIN_PROXY_PATH, // 目标服务器地址
  65. ws: true, // 是否启用 WebSocket
  66. changeOrigin: true,
  67. },
  68. },
  69. },
  70. build: {
  71. outDir: 'dist', // 打包输出目录
  72. chunkSizeWarningLimit: 1500, // 代码分包阈值
  73. // 开发使用 esbuild 更快,生产环境打包使用 terser 可以删除更多注释
  74. minify: isDev ? 'esbuild' : 'terser',
  75. terserOptions: {
  76. compress: {
  77. drop_console: true, // 删除 console
  78. drop_debugger: true, // 删除 debugger
  79. },
  80. format: {
  81. comments: false // 删除所有注释
  82. }
  83. },
  84. rollupOptions: {
  85. output: {
  86. entryFileNames: `assets/[name].[hash].js`,
  87. chunkFileNames: `assets/[name].[hash].js`,
  88. assetFileNames: `assets/[name].[hash].[ext]`,
  89. compact: true,
  90. manualChunks: {
  91. vue: ['vue', 'vue-router', 'pinia'],
  92. echarts: ['echarts'],
  93. },
  94. },
  95. },
  96. },
  97. css: { preprocessorOptions: { css: { charset: false } } },
  98. define: {
  99. __VUE_I18N_LEGACY_API__: JSON.stringify(false),
  100. __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
  101. __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
  102. __VERSION__: JSON.stringify(process.env.npm_package_version),
  103. __NEXT_NAME__: JSON.stringify(process.env.npm_package_name),
  104. },
  105. };
  106. });
  107. export default viteConfig;