Vue3 vite.config.js 配置完全教程

第一章：基础配置

1.1 基本配置项

vite.config.js 的基本配置项。

练习 1.1：基本配置示例

展示 vite.config.js 的基本配置。

基本配置示例

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

export default defineConfig({
  // 项目根目录
  root: process.cwd(),
  
  // 基础路径
  base: '/',
  
  // 静态资源目录
  publicDir: 'public',
  
  // 构建输出目录
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  },
  
  // 开发服务器配置
  server: {
    port: 3000,
    host: '0.0.0.0',
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 插件配置
  plugins: [vue()]
})

1.2 路径配置

vite.config.js 的路径配置。

练习 1.2：路径配置示例

展示路径配置的使用。

路径配置示例

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

export default defineConfig({
  // 路径别名配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
      'assets': path.resolve(__dirname, 'src/assets'),
      'views': path.resolve(__dirname, 'src/views'),
      'api': path.resolve(__dirname, 'src/api')
    }
  },
  
  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

第二章：构建配置

2.1 构建优化

vite.config.js 的构建优化配置。

练习 2.1：构建优化示例

展示构建优化的配置。

构建优化示例

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

export default defineConfig({
  // 构建配置
  build: {
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    
    // 构建后是否生成 source map 文件
    sourcemap: false,
    
    // 自定义底层的 Rollup 打包配置
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'vuex'],
          'element-plus': ['element-plus']
        }
      }
    },
    
    // 启用/禁用 gzip 压缩大小报告
    reportCompressedSize: false,
    
    // 启用/禁用 brotli 压缩大小报告
    brotliSize: false,
    
    // 指定生成静态资源的存放路径
    assetsInlineLimit: 4096
  },
  
  // 插件配置
  plugins: [
    vue(),
    splitVendorChunkPlugin()
  ]
})

2.2 多页面配置

vite.config.js 的多页面配置。

练习 2.2：多页面配置示例

展示多页面配置的使用。

多页面配置示例

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

export default defineConfig({
  // 多页面配置
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        admin: path.resolve(__dirname, 'admin.html')
      }
    }
  },
  
  // 插件配置
  plugins: [vue()]
})

第三章：插件配置

3.1 常用插件配置

vite.config.js 的常用插件配置。

练习 3.1：常用插件配置示例

展示常用插件的配置。

常用插件配置示例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  // 插件配置
  plugins: [
    // Vue 插件
    vue(),
    
    // JSX 支持
    vueJsx(),
    
    // 自动导入 API
    AutoImport({
      imports: ['vue', 'vue-router', 'vuex'],
      dts: 'src/auto-imports.d.ts'
    }),
    
    // 自动导入组件
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts'
    }),
    
    // PWA 支持
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

3.2 自定义插件配置

vite.config.js 的自定义插件配置。

练习 3.2：自定义插件配置示例

展示自定义插件的配置。

自定义插件配置示例

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

// 自定义插件
const myPlugin = () => {
  return {
    name: 'my-plugin',
    config(config) {
      console.log('My plugin is running')
      return {
        // 修改配置
        build: {
          rollupOptions: {
            // 自定义配置
          }
        }
      }
    }
  }
}

export default defineConfig({
  // 插件配置
  plugins: [
    vue(),
    myPlugin()
  ],
  
  // 自定义配置
  optimizeDeps: {
    include: ['vue', 'vue-router', 'vuex']
  }
})

第四章：环境配置

4.1 环境变量配置

vite.config.js 的环境变量配置。

练习 4.1：环境变量配置示例

展示环境变量的配置。

环境变量配置示例

// .env.development
VITE_APP_TITLE=开发环境
VITE_APP_API_URL=http://localhost:3000

// .env.production
VITE_APP_TITLE=生产环境
VITE_APP_API_URL=https://api.example.com

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  
  return {
    // 插件配置
    plugins: [vue()],
    
    // 环境变量配置
    define: {
      __APP_ENV__: JSON.stringify(env.VITE_APP_TITLE)
    },
    
    // 开发服务器配置
    server: {
      proxy: {
        '/api': {
          target: env.VITE_APP_API_URL,
          changeOrigin: true
        }
      }
    }
  }
})

4.2 多环境配置

vite.config.js 的多环境配置。

练习 4.2：多环境配置示例

展示多环境配置的使用。

多环境配置示例

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())
  
  // 根据环境配置不同的选项
  const isProduction = mode === 'production'
  
  return {
    // 基础路径
    base: isProduction ? '/production-sub-path/' : '/',
    
    // 构建配置
    build: {
      // 生产环境配置
      minify: isProduction ? 'terser' : 'esbuild',
      sourcemap: !isProduction,
      rollupOptions: {
        output: {
          manualChunks: isProduction ? {
            'vue-vendor': ['vue', 'vue-router', 'vuex']
          } : undefined
        }
      }
    },
    
    // 开发服务器配置
    server: {
      port: isProduction ? 8080 : 3000,
      proxy: {
        '/api': {
          target: env.VITE_APP_API_URL,
          changeOrigin: true
        }
      }
    }
  }
})