Vue3构建工具Vite的核心打包配置备忘

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

export default defineConfig({
  // ---------------------- 基础配置 ----------------------
  base: './', // 部署公共路径（相对路径用 './'，CDN 用 'https://xxx.com/'）
  root: process.cwd(), // 项目根目录
  mode: 'production', // 环境模式（development/production）

  // ---------------------- 构建配置（核心） ----------------------
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录（js/css/img）
    sourcemap: false, // 是否生成 source map（生产环境建议 false）
    minify: 'terser', // 压缩工具：terser（需安装）或 esbuild（更快）
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境删除 console
        drop_debugger: true // 删除 debugger
      }
    },
    rollupOptions: {
      // 手动分包（优化缓存）
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'], // Vue 生态单独打包
          'ui-vendor': ['element-plus'] // UI 库单独打包
        }
      }
    },
    assetsInlineLimit: 4096, // 小于 4kb 的图片转 base64
    emptyOutDir: true // 打包前清空输出目录
  },

  // ---------------------- 开发服务器配置（仅开发用） ----------------------
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // ---------------------- 路径别名 ----------------------
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },

  // ---------------------- 插件 ----------------------
  plugins: [vue()]
});