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 ElementPlus from 'unplugin-element-plus/vite'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    // ElementPlus(),
    vue(),

    // 仅在生产环境启用 legacy 插件
    ...(process.env.NODE_ENV === 'production'
      ? [
          legacy({
            targets: ['ie >= 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
            modernPolyfills: true
          })
        ]
      : []),
    AutoImport({
      imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API
      // 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等
      resolvers: [
        ElementPlusResolver({
          importStyle: false, // 关闭自动导入样式（手动引入 index.css）
          directives: true // 导入 Element Plus 指令（如 v-loading）
        })
        // ElementPlusResolver({
        //   importStyle: 'sass',
        //   directives: true // 导入指令
        // })
      ],
      dts: true // 生成 auto-imports.d.ts（让 ESLint 识别自动导入的 API）
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: false // 同上，避免与手动引入的样式冲突
        })
      ], // 自动解析 Element Plus 组件
      dts: true, // 生成 components.d.ts（关键：让 ESLint 识别组件）
      include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/], // 确保覆盖所有组件文件
      // 自动导入 ElementPlus 的组件
      // resolvers: [
      //   ElementPlusResolver({
      //     importStyle: 'sass',
      //     directives: true
      //   })
      // ],
      dirs: ['src/components'] // 自动扫描组件目录
    }),
    // 开发环境暂时禁用图片压缩插件
    ...(process.env.NODE_ENV !== 'development'
      ? [
          viteImagemin({
            gifsicle: { optimizationLevel: 7 },
            optipng: { optimizationLevel: 7 },
            mozjpeg: { quality: 80 },
            pngquant: { quality: [0.8, 0.9] },
            svgo: { plugins: [{ name: 'removeViewBox' }] }
          })
        ]
      : [])
  ],
  server: {
    host: '0.0.0.0', // 允许外部访问
    port: 3000, // 指定端口
    open: true, // 自动打开浏览器
    fs: {
      strict: false // 允许访问项目根目录外的文件
    },
    // 代理配置（如有跨域问题）
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  optimizeDeps: {
    // include: ['element-plus'] // 预构建依赖
  },
  build: {
    chunkSizeWarningLimit: 1000, // 增大分块警告阈值
    rollupOptions: {
      // external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
      // external: ['element-plus'], // 排除 Element Plus 从打包中
      output: {
        // manualChunks: undefined // 取消手动分割，使用 Vite 自动策略
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 将第三方库单独分包（如 axios、vue 等）
            return id.split('node_modules/')[1].split('/')[0]
          }
        }
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
        api: 'modern-compiler'
        // additionalData: `@import "@/styles/element-variables.scss";`
        // api: 'modern' // 轻量版，适合简单场景
      },
      less: {
        // 关键配置：自动注入 global.less
        additionalData: `@import "@/styles/global.less";`,

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