ufutx-pc-website/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 引入 path 模块

import viteImagemin from 'vite-plugin-imagemin' // 新插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// 引入 ElementPlus 相关解析器
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
  plugins: [
    vue(),

    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      modernPolyfills: true // 启用现代浏览器的 polyfill
    }),
    AutoImport({
      imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API
      // 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass', // 可选：按需导入样式
          directives: true, // 导入指令
          version: '2.3.6' // 版本号
        })
      ]
    }),
    Components({
      // 自动导入 ElementPlus 的组件
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
          directives: true
        })
      ],
      dirs: ['src/components'] // 自动扫描组件目录
    }),
    viteImagemin({
      // 基础压缩配置（可根据需求扩展）
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: { plugins: [{ name: 'removeViewBox' }] }
    })
  ],
  build: {
    rollupOptions: {
      // external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
      // external: ['element-plus'], // 排除 Element Plus 从打包中
      output: {
        manualChunks(id) {
          // 只打包实际使用的 Element Plus 组件
          // if (id.includes('element-plus/es/components')) {
          //   const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
          //   return `element-${componentName}`
          // }
          // if (id.includes('node_modules')) {
          //   // 将第三方库单独分包（如 axios、vue 等）
          //   return id.split('node_modules/')[1].split('/')[0]
          // }
          // 1. 将 Element Plus 整体打包为一个 chunk
          // 只分割实际使用的库
          if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
            return 'vue-vendor'
          }

          if (id.includes('axios') || id.includes('nprogress')) {
            return 'utils'
          }

          // 不强制分割第三方依赖，让 Vite 自动处理
          if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
            return undefined // 取消手动分割
          }
        }
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
        api: 'modern-compiler'
        // api: 'modern' // 轻量版，适合简单场景
      },
      less: {
        // 关键配置：自动注入 global.less
        additionalData: `@import "@/styles/global.less";`,

        // 可选：如果需要自定义 Less 选项
        javascriptEnabled: true
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 添加路径别名
    }
  }
})