Vite 配置指南

Vite 是下一代前端构建工具，以极速的冷启动和热更新著称。

基础配置

创建 vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,        // 开发服务器端口
    open: true,        // 自动打开浏览器
    host: true,        // 允许局域网访问
  },
  build: {
    outDir: 'dist',    // 构建输出目录
    sourcemap: false,  // 生产环境关闭 sourcemap
  },
})

路径别名

配置 @ 作为 src/ 的别名，简化导入路径：

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@pages': resolve(__dirname, 'src/pages'),
    },
  },
})

使用：

// 之前
import Header from '../../components/Header'

// 之后
import Header from '@components/Header'

环境变量

Vite 使用 .env 文件管理环境变量：

# .env               — 所有模式加载
# .env.development   — 开发模式
# .env.production    — 生产模式

# .env
VITE_APP_TITLE=我的应用
VITE_API_BASE=https://api.example.com

在代码中使用：

console.log(import.meta.env.VITE_APP_TITLE)

注意

只有以 VITE_ 开头的变量才会暴露给客户端代码。

代理配置

开发时解决跨域问题：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

构建优化

分包策略

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
  },
})

压缩与体积分析

# 安装分析插件
npm install rollup-plugin-visualizer -D

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true }),  // 构建后自动打开分析报告
  ],
})

性能建议

• 使用 import() 动态导入实现路由级代码分割
• 大型依赖（如 lodash）按需导入：import debounce from 'lodash/debounce'
• 图片资源使用 ?url 或 ?raw 后缀控制导入方式