vite.config.js怎么配置

# vite.config.js怎么配置

## 目录
- [前言](#前言)
- [基础配置](#基础配置)
  - [入口文件配置](#入口文件配置)
  - [输出目录配置](#输出目录配置)
  - [开发服务器配置](#开发服务器配置)
- [高级配置](#高级配置)
  - [环境变量处理](#环境变量处理)
  - [CSS预处理器配置](#css预处理器配置)
  - [静态资源处理](#静态资源处理)
- [插件系统](#插件系统)
  - [常用官方插件](#常用官方插件)
  - [社区插件推荐](#社区插件推荐)
- [构建优化](#构建优化)
  - [代码分割策略](#代码分割策略)
  - [Tree Shaking配置](#tree-shaking配置)
- [多环境配置](#多环境配置)
- [完整配置示例](#完整配置示例)
- [总结](#总结)

## 前言

Vite作为新一代前端构建工具，凭借其极快的启动速度和高效的热更新机制，已经成为现代Web开发的重要选择。本文将全面解析`vite.config.js`的配置方法，涵盖从基础配置到高级优化的完整知识体系。

## 基础配置

### 入口文件配置

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  root: './src', // 项目根目录
  build: {
    outDir: '../dist', // 输出目录
    emptyOutDir: true, // 构建前清空输出目录
    rollupOptions: {
      input: {
        main: './src/main.js', // 主入口文件
        admin: './src/admin.js' // 多页面入口
      }
    }
  }
})

开发服务器配置

export default defineConfig({
  server: {
    port: 3000, // 指定端口
    open: true, // 自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
})

高级配置

CSS预处理器配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        math: 'always'
      }
    }
  }
})

静态资源处理

export default defineConfig({
  assetsInclude: ['**/*.gltf'], // 自定义静态资源类型
  build: {
    assetsInlineLimit: 4096 // 小于4KB的资源内联为base64
  }
})

插件系统

常用官方插件

import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

构建优化

代码分割策略

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

多环境配置

// vite.config.js
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV)
    }
  }
})

完整配置示例

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

export default defineConfig({
  base: '/',
  plugins: [vue(), visualizer()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000'
    }
  },
  build: {
    target: 'esnext',
    minify: 'terser',
    sourcemap: true,
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          vendor: ['lodash', 'axios']
        }
      }
    }
  },
  css: {
    modules: {
      localsConvention: 'camelCaseOnly'
    }
  }
})

总结

本文详细介绍了Vite配置的各个方面，从基础配置到高级优化策略。通过合理配置vite.config.js，开发者可以充分发挥Vite的性能优势，构建高效的前端应用。

（注：实际9100字内容因篇幅限制在此进行压缩展示，完整版应包含更多配置细节、原理分析、性能对比和实际案例等内容） “`

这篇文章大纲提供了完整的配置指南结构，实际9100字内容需要： 1. 每个章节扩展详细说明 2. 增加配置选项的深度解析 3. 添加实际项目中的配置示例 4. 包含性能优化建议和常见问题解决方案 5. 补充不同框架(Vue/React/Svelte)的特殊配置 6. 添加构建原理和配置背后的设计思想

需要完整内容可以告知，我可以继续扩展每个章节的具体内容。