共享配置抽取

将公共配置抽取到独立文件，便于多环境复用和统一管理。

配置文件拆分

project/
├── vite.config.js           # 入口配置
├── vite.base.config.js      # 公共配置
├── vite.dev.config.js       # 开发配置
└── vite.prod.config.js      # 生产配置

公共配置文件

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

环境配置文件

// vite.dev.config.js
export default defineConfig({
  server: {
    port: 3000,
    open: true
  }
})

// vite.prod.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    sourcemap: false
  }
})

组合配置

// vite.config.js
import { defineConfig, mergeConfig } from 'vite'
import baseConfig from './vite.base.config'
import devConfig from './vite.dev.config'
import prodConfig from './vite.prod.config'

export default defineConfig(({ command }) => {
  const envConfig = command === 'serve' ? devConfig : prodConfig
  return mergeConfig(baseConfig, envConfig)
})

mergeConfig 用法

import { mergeConfig } from 'vite'

// 合并两个配置
const merged = mergeConfig(configA, configB)

注意：mergeConfig 是 Vite 提供的配置合并工具函数。

配置抽取优势

要点总结

• 公共配置抽取到独立文件
• 环境配置按场景拆分
• 使用 mergeConfig 组合配置
• 提升配置可维护性和复用性