常见vite打包配置

import { defineConfig, loadEnv } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path';

export default defineConfig(({ mode }) => { // 加载环境变量 const env = loadEnv(mode, process.cwd());

return { plugins: [ react(), ],

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

// 2. 开发服务器
server: {
  port: 3000,
  // 代理（解决开发环境跨域）
  proxy: {
    '/api': {
      target: env.VITE_API_URL,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
},

// 3. 生产构建
build: {
  outDir: 'dist',
  // 代码分割
  rollupOptions: {
    output: {
      manualChunks: {
        react: ['react', 'react-dom'],
        vendor: ['lodash-es', 'axios'],
      },
      // 文件名 hash
      chunkFileNames: 'js/[name].[hash:8].js',
      assetFileNames: 'assets/[name].[hash:8][extname]',
    },
  },
  // 小于 8kb 的图片转 base64
  assetsInlineLimit: 8 * 1024,
  // 压缩方式
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
    },
  },
},

}; });