ufutx-pc-website/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// import viteImagemin from 'vite-plugin-imagemin'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { visualizer } from 'rollup-plugin-visualizer'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig(({ mode }) => ({
  // 新增：指定打包基础路径为 /web/
  // base: '/web/', // 所有资源引用会以 /web/ 为前缀（如静态资源路径变为 /web/static/js/xxx.js）
  base: mode === 'production' ? '/web/' : '/',

  plugins: [
    visualizer({
      filename: './node_modules/.cache/visualizer/stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true
    }),
    vue(),
    ...(process.env.NODE_ENV === 'production'
      ? [
          legacy({
            targets: ['ie >= 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
            modernPolyfills: true
          })
        ]
      : []),
    AutoImport({
      // 1. 自动导入的 API 来源（Vue 核心 API + Vue Router 等）
      imports: [
        'vue', // 自动导入 Vue 组合式 API（ref、reactive、onMounted 等）
        'vue-router' // 可选：自动导入 Vue Router API（useRouter 等）
        // 其他来源（如 Pinia）可按需添加
      ],
      // 2. 生成类型声明文件（让 TypeScript 识别自动导入的 API）
      dts: 'src/auto-imports.d.ts', // 生成的类型文件路径（必须存在）
      // 3. 解决 ESLint 报错（可选，若 ESLint 提示“未定义变量”）
      eslintrc: {
        enabled: true, // 生成 ESLint 配置片段
        filepath: './.eslintrc-auto-import.json' // 生成的 ESLint 配置文件
      }
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: false
        })
      ],
      dts: true,
      include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
      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/, '')
      }
    }
    // proxy: {
    //   '^/dev-api': {
    //     target: ''
    //   }
    // }
  },
  optimizeDeps: {
    // include: ['element-plus']
  },
  build: {
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 将第三方库单独分包（如 axios、vue 等）
            return id.split('node_modules/')[1].split('/')[0]
          }
        }
        // chunkFileNames: 'static/js/[name]-[hash].js',
        // entryFileNames: 'static/js/[name]-[hash].js',
        // assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      },
      less: {
        additionalData: `@import "@/styles/global.less";`,
        javascriptEnabled: true
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}))