Vite 构建配置优化

一、基础配置 vite.config.ts

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

export default defineConfig({
  // 插件
  plugins: [vue()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils'),
    }
  },
  
  // 开发服务器
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild',
    rollupOptions: {
      output: {
        // 分包策略
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          vendor: ['lodash', 'axios']
        }
      }
    }
  }
});

二、路径别名与 TypeScript

// vite.config.ts
resolve: {
  alias: {
    '@': resolve(__dirname, 'src'),
    '@components': resolve(__dirname, 'src/components'),
    '@views': resolve(__dirname, 'src/views'),
    '@store': resolve(__dirname, 'src/store'),
    '@api': resolve(__dirname, 'src/api'),
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"],
      "@store/*": ["src/store/*"],
      "@api/*": ["src/api/*"]
    }
  }
}

// 代码中使用
import Button from '@components/Button.vue';
import { useUserStore } from '@store/user';
import { getUser } from '@api/user';

三、开发服务器与代理

server: {
  host: '0.0.0.0',      // 允许外部访问
  port: 3000,            // 端口
  open: true,            // 自动打开浏览器
  cors: true,            // 允许跨域
  https: false,          // HTTPS
  
  // 代理配置
  proxy: {
    // 简单代理
    '/api': 'http://localhost:8080',
    
    // 完整配置
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,              // 修改请求源
      rewrite: (path) => path.replace(/^\/api/, ''),
      secure: false,                   // 不验证 SSL
      ws: true,                        // WebSocket 代理
      
      // 请求拦截
      configure: (proxy, options) => {
        proxy.on('proxyReq', (proxyReq, req, res) => {
          console.log('代理请求:', req.url);
        });
      }
    }
  },
  
  // 热更新配置
  hmr: {
    overlay: true         // 错误遮罩层
  }
}

四、构建优化配置

build: {
  // 输出目录
  outDir: 'dist',
  assetsDir: 'assets',
  
  // 压缩方式
  minify: 'esbuild',      // esbuild | terser | false
  // minify: 'terser',    // 更好的压缩，稍慢
  terserOptions: {
    compress: {
      drop_console: true, // 移除 console
      drop_debugger: true
    }
  },
  
  // Source Map
  sourcemap: false,       // 生产环境关闭
  
  // 消除未使用代码
  treeshake: true,
  
  // 小于此阈值的资源内联为 base64
  assetsInlineLimit: 4096,
  
  // Rollup 配置
  rollupOptions: {
    output: {
      // JS 分包
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'ui-lib': ['element-plus', '@element-plus/icons-vue'],
        'utils': ['lodash-es', 'dayjs']
      },
      
      // 资源文件名
      chunkFileNames: 'js/[name]-[hash].js',
      entryFileNames: 'js/[name]-[hash].js',
      assetFileNames: (info) => {
        if (info.name?.endsWith('.css')) {
          return 'css/[name]-[hash].css';
        }
        if (/\.(png|jpe?g|gif|svg|webp)$/.test(info.name || '')) {
          return 'images/[name]-[hash].[ext]';
        }
        return 'assets/[name]-[hash].[ext]';
      }
    }
  }
}

五、常用 Vite 插件

// ===== 1. @vitejs/plugin-vue - Vue 支持 =====
import vue from '@vitejs/plugin-vue';
plugins: [vue()]

// ===== 2. @vitejs/plugin-vue-jsx - JSX 支持 =====
import vueJsx from '@vitejs/plugin-vue-jsx';
plugins: [vue(), vueJsx()]

// ===== 3. vite-plugin-eslint - 代码检查 =====
import eslint from 'vite-plugin-eslint';
plugins: [eslint({ cache: false })]

// ===== 4. vite-plugin-compression - gzip 压缩 =====
import viteCompression from 'vite-plugin-compression';
plugins: [
  viteCompression({
    algorithm: 'gzip',
    ext: '.gz'
  })
]

// ===== 5. unplugin-auto-import - 自动导入 =====
import AutoImport from 'unplugin-auto-import/vite';
plugins: [
  AutoImport({
    imports: ['vue', 'vue-router', 'pinia'],
    dts: 'src/auto-imports.d.ts'
  })
]
// 无需 import { ref, computed } from 'vue'

// ===== 6. unplugin-vue-components - 组件自动注册 =====
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
plugins: [
  Components({
    resolvers: [ElementPlusResolver()],
    dts: 'src/components.d.ts'
  })
]

六、环境变量配置

// ===== .env 基础 =====
VITE_APP_TITLE = LoveQing Notes
VITE_APP_BASE_URL = /

// ===== .env.development 开发环境 =====
VITE_API_BASE_URL = http://localhost:8080/api

// ===== .env.production 生产环境 =====
VITE_API_BASE_URL = https://api.loveqing.top

// ===== 代码中使用 =====
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta.env.MODE);           // 'development' | 'production'
console.log(import.meta.env.DEV);            // 开发环境 true
console.log(import.meta.env.PROD);           // 生产环境 true
console.log(import.meta.env.SSR);            // 服务端渲染

// ===== TypeScript 类型声明 =====
// src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

七、CSS 预处理器与 Modules

// 安装 Sass
// npm install -D sass

// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      // 全局变量注入
      additionalData: `
        @import "@/styles/variables.scss";
        @import "@/styles/mixins.scss";
      `
    }
  },
  
  // CSS Modules
  modules: {
    localsConvention: 'camelCaseOnly',
    generateScopedName: '[local]__[hash:base64:5]'
  },
  
  // 开发环境显示源文件
  devSourcemap: true
}

// ===== 组件中使用 SCSS =====


// ===== CSS Modules =====

八、性能优化清单

// ✅ 1. 开启 gzip/brotli 压缩
import viteCompression from 'vite-plugin-compression';

// ✅ 2. 合理分包 manualChunks
// 分离 vue 核心库、UI 库、工具库

// ✅ 3. 按需引入 Element Plus / Ant Design Vue
// 使用 unplugin-vue-components 自动按需引入

// ✅ 4. 图片压缩
// vite-plugin-imagemin

// ✅ 5. CDN 加速
build: {
  rollupOptions: {
    external: ['vue', 'vue-router'],
    output: {
      globals: {
        vue: 'Vue',
        'vue-router': 'VueRouter'
      }
    }
  }
}

// ✅ 6. 移除 console.log
terserOptions: {
  compress: { drop_console: true }
}

// ✅ 7. 分析包大小
// npm run build -- --mode=analyze
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [visualizer({ open: true })]

Vite vs Webpack 对比

特性	Vite	Webpack
开发启动	⚡ 毫秒级	🐢 几秒到几十秒
HMR热更新	⚡ 即时更新	🐢 随项目变大变慢
构建工具	esbuild + Rollup	Webpack + Terser
原生ES模块	✅ 原生支持	❌ 打包后运行
配置复杂度	✅ 简单	❌ 复杂