@yubei826/vite-config

一个高度可定制、插件化的 Vite 配置预设，专为 Vue 3 项目设计，集成了常用开发工具与构建优化策略。

特性

• 🛠️ 插件化架构，按需引入功能
• 🎯 支持 Vue 3、JSX、TypeScript
• 🎨 集成 UnoCSS、SVG 图标、图片处理
• 🌍 国际化（i18n）支持
• 📦 自动导入 API 与组件
• 🔧 丰富的构建优化：代码分割、压缩、归档等
• 📊 打包分析可视化
• 🔍 ESLint 集成、Mock 数据支持
• 📱 兼容传统浏览器（legacy build）

注意事项

react目前未做测试，暂不支持，如需使用，可通过配置 pluginsSet 增加react插件实现支持

安装

pnpm install -D vite @yubei826/vite-config

快速开始

1. 在 vite.config.ts 中引入并使用

import { defineConfig, loadEnv } from 'vite'
import { defineViteConfig } from '@yubei826/vite-config'

export default defineConfig(defineViteConfig({
  // 可选：插件集配置
  pluginsSet: {
    vue: true,
    vueJsx: true,
    unocss: true,
    // ... 其他插件
  },

  // 可选：自定义环境变量（会覆盖 .env 文件）
  userEnv: {
    PROXY_API_BASEURL: 'http://localhost:3000', // 服务器地址
    PROXY_PREFIX: '/api', // 代理前缀，例如 '/api'
    PROXY_REPELATE: true, // 是否移除代理路径 例如移除 '/api'
    DROP_CONSOLE: true,
    BUILD_SOURCEMAP: false,
    // ... 其他环境变量
  },

  // 可选：是否强制生产模式
  isProduction: false,

  // 可选：其他 Vite 原生配置（会合并到默认配置中）
  server: {
    port: 3000,
  },
  // ... 其他 Vite 配置
}))



// 也可以用以下方式
import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import { defineViteConfig } from '@yubei826/vite-config'

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  
  return defineViteConfig({
    pluginsSet: {},

    userEnv: {
      PROXY_PREFIX: env.PROXY_PREFIX,
      // ... 其他环境变量
      ...env
    },
  })
})

2. 在 package.json 中配置脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  }
}

环境变量配置

你可以在项目根目录创建 .env 文件，或通过 userEnv 传入以下变量：

| 变量名 | 类型 | 默认值 | 说明 | |------------------|--------------------------|-------------|------------------------------| | BUILD_ARCHIVE | 'zip' \| 'tar' | 'zip' | 构建输出压缩格式 | | PROXY_API_BASEURL| string | 'http://localhost:3000' | 代理目标地址 | | PROXY_PREFIX | string | '/api' | 代理前缀，如 /api | | PROXY_REPELATE | boolean | true | 是否移除代理路径 例如移除 '/api' | | DROP_CONSOLE | boolean | false | 是否移除 console.log | | DROP_DEBUGGER | boolean | false | 是否移除 debugger | | BUILD_SOURCEMAP | boolean | false | 是否生成 sourcemap | | USE_CSS_SPLIT | boolean | true | 是否启用 CSS 代码分割 | | BUILD_COMPRESS | string[] | ['gzip'] | 压缩算法，可选 gzip / brotli |

插件集配置（pluginsSet）

你可以在 defineViteConfig 中通过 pluginsSet 控制各个插件的启用与配置：

defineViteConfig({
  pluginsSet: {
    vue: true, // 启用 Vue 插件
    vueJsx: true, // 启用 JSX 支持
    unocss: true, // 启用 UnoCSS
    mock: false, // 默认不启用
    eslint: true, // 启用 ESLint
    i18n: false, // 默认不启用
    autoImport: true, // 启用自动导入
    components: true, // 启用自动导入组件
    styleImport: true, // 启用按需导入样式
    progress: true, // 启用构建进度条
    svgIcon: true, // 启用 SVG 图标
    setupExtend: false, // 默认不启用
    compression: false, // 默认不启用
    archiver: false, // 默认不启用
    devtool: process.env.NODE_ENV === 'development', // 开发环境默认启用
    images: false,
    startInfo: true, // 启用启动信息
    chunkSplit: true, // 启用代码分割
    visualizer: false, // 默认不启用
    legacy: false // 默认不启用
  }
})

每个插件都支持传入配置对象，例如：

defineViteConfig({
  pluginsSet: {
    vue: {
      reactivityTransform: true
    },
    unocss: {
      // ... UnoCSS 配置
    }
  }
})

路径别名

预设了以下别名，无需额外配置：

| 别名 | 对应路径 | |------|-----------------| | @ | src | | # | types | | $ | src/plugins | | ~ | src/modules |

alias 相关代码

{
  '@': path.resolve(root, 'src'),
  '#': path.resolve(root, 'types'),
  '$': path.resolve(root, 'src/plugins'),
  '~': path.resolve(root, 'src/modules'),
}

示例配置

基础 Vue 3 + TypeScript 项目

import { defineConfig } from 'vite'
import { defineViteConfig } from '@yubei826/vite-config'

export default defineConfig(defineViteConfig({
  pluginsSet: {
    vue: true,
    vueJsx: true,
    autoImport: true,
    components: true,
    eslint: true,
  }
}))

// 生产环境配置
export default defineConfig(defineViteConfig({
  isProduction: true,
  userEnv: {
    DROP_CONSOLE: true,
    DROP_DEBUGGER: true,
    BUILD_SOURCEMAP: false,
    BUILD_COMPRESS: ['gzip', 'brotli'],
    BUILD_ARCHIVE: 'zip',
  },
  pluginsSet: {
    compression: true,
    archiver: true,
    visualizer: true,
  }
}))

注意事项

• 如需使用 unocss，可安装 @yubei826/unocss-config 并创建 uno.config.ts

• 如需使用 vant，请自行安装并在 components 与 styleImport 中配置

• 部分插件（如 legacy）会根据浏览器支持自动降级

• 构建归档功能默认关闭，需通过 BUILD_ARCHIVE 环境变量开启

• 默认需要配置 paths，代码如下

• 若启用 svg-icon 插件，需要在tsconfig.json中配置类型 vite-plugin-svg-icons-ng/client

• 若启用 i18n 插件，需要在tsconfig.json中配置类型 @intlify/unplugin-vue-i18n/types

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["src/**/*", "types/**/*.d.ts", "mock/**/*.ts"],
  "exclude": ["src/**/__tests__/*", "node_modules", "dist"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "#/*": ["./types/*"],
      "$/*": ["./src/plugins/*"],
      "~/*": ["./src/modules/*"]
    },
    // "typeRoots": ["./node_modules/@types/", "./types/"],
    "types": [
      "@intlify/unplugin-vue-i18n/types",
      "vite/client",
      "vite-plugin-svg-icons-ng/client"
      // "element-plus/global",
      // "@types/qrcode",
    ]
  }
}

贡献

欢迎提交问题和拉取请求。

许可证

MIT License

// 完整示例
import { defineConfig } from 'vite'
import { defineViteConfig } from '@yubei826/vite-config'

export default defineConfig(defineViteConfig({
  // 是否强制生产模式
  isProduction: true,
  
  // 用户环境配置
  userEnv: {
    BUILD_ARCHIVE: 'zip',
    PROXY_PREFIX: '/api',
    PROXY_API_BASEURL: 'http://localhost:3000',
    DROP_CONSOLE: true,
    DROP_DEBUGGER: true,
    BUILD_SOURCEMAP: false,
    USE_CSS_SPLIT: true,
    BUILD_COMPRESS: 'gzip',
  },
  
  // 插件集配置
  pluginsSet: {
    vue: true, // 启用Vue插件
    vueJsx: true, // 启用Vue JSX插件
    unocss: true, // 启用UnoCSS插件
    mock: false, // 禁用Mock插件
    eslint: {
      // ESLint插件自定义配置
      fix: true,
    },
    i18n: true, // 启用国际化插件
    autoImport: true, // 启用自动导入插件
    components: true, // 启用组件自动导入插件
    styleImport: true, // 启用样式按需加载插件
    progress: true, // 启用进度显示插件
    svgIcon: true, // 启用SVG图标插件
    setupExtend: true, // 启用setup语法糖扩展插件
    compression: true, // 启用压缩插件
    archiver: true, // 启用归档插件
    devtool: true, // 启用开发工具插件
    images: true, // 启用图片处理插件
    startInfo: true, // 启用启动信息插件
    chunkSplit: true, // 启用代码分割插件
    visualizer: true, // 启用可视化分析插件
    legacy: true, // 启用浏览器兼容性插件
  },
  
  // 标准Vite配置（可选）
  server: {
    port: 3000,
    open: true,
  },
  
  build: {
    outDir: 'dist',
    sourcemap: false,
  },
})