vite.config.ts 3.4 KB

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