@tker/vite-config

v2.0.8

Published

22 days ago

一个开箱即用的 Vite 配置封装包，提供应用项目和库项目的标准化构建配置。

0High
0Medium
0Low

npm13358301153

@tker/vite-config

一个开箱即用的 Vite 配置封装包，提供应用项目和库项目的标准化构建配置。

安装

pnpm add -D @tker/vite-config

用法

defineConfig

defineConfig 会自动检测项目类型：如果项目根目录存在 index.html 则为应用项目，否则为库项目。

// vite.config.ts
import { defineConfig } from '@tker/vite-config';

export default defineConfig(async (config) => {
  return {
    application: {  // 应用项目配置（存在 index.html 时生效）
      // 应用插件配置
    },
    library: {      // 库项目配置（不存在 index.html 时生效）
      // 库插件配置
    },
    vite: {         // 自定义 Vite 配置，会与内置配置合并
      // ...
    }
  };
});

也可以手动指定项目类型：

import { defineConfig } from '@tker/vite-config';

// 强制指定为应用项目
export default defineConfig(async (config) => {
  return { ... };
}, 'application');

// 强制指定为库项目
export default defineConfig(async (config) => {
  return { ... };
}, 'library');

配置选项

ApplicationOptions（应用项目配置）

当项目根目录存在 index.html 时生效。

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | archiver | boolean | true | 是否开启压缩归档，开启后会在打包目录生成 zip 文件 | | archiverPluginOptions | { name?: string; outputDir?: string } | {} | 压缩归档插件配置 | | compress | boolean | true | 是否开启压缩，支持 gzip 和 brotli | | compressTypes | ('gzip' \| 'brotli')[] | ['gzip'] | 压缩类型 | | copyright | string | - | 版权信息，传入后自动注入到构建产物入口文件 | | dropConsole | boolean | true | 是否去除 console | | extraAppConfig | boolean | true | 是否抽离配置文件 | | html | boolean | true | 是否开启 HTML 插件 | | injectAppLoading | boolean | true | 是否注入应用加载动画 | | appId | string | '#app' | Vue 应用挂载的目标元素选择器 | | print | boolean | false | 是否开启控制台打印（开发模式默认 true） | | printInfoMap | Record<string, string> | - | 打印的数据映射 | | themeColors | ThemeColor[] | - | 主题颜色注入 | | devtools | boolean | false | 是否开启 Vue DevTools（开发模式默认 true） | | env | Record<string, any> | - | 环境变量 | | injectBuildTime | boolean | true | 是否注入构建时间 | | mode | string | 'development' | 构建模式 | | visualizer | boolean \| PluginVisualizerOptions | false | 是否开启依赖分析 | | tailwind | boolean | false | 是否启用 Tailwind CSS |

LibraryOptions（库项目配置）

当项目根目录不存在 index.html 时生效。

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | dts | boolean \| PluginOption | false | 是否开启 DTS 输出，生成 TypeScript 类型声明文件 | | devtools | boolean | false | 是否开启 Vue DevTools | | env | Record<string, any> | - | 环境变量 | | injectBuildTime | boolean | true | 是否注入构建时间 | | mode | string | 'development' | 构建模式 | | visualizer | boolean \| PluginVisualizerOptions | false | 是否开启依赖分析 | | tailwind | boolean | false | 是否启用 Tailwind CSS |

ThemeColor（主题颜色配置）

根据单一颜色自动生成完整色盘，并注入 CSS 变量到页面中。

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | name | string | 是 | 颜色名称，用于生成 CSS 变量前缀 | | color | string | 是 | 基础颜色值，支持 HSL、RGB、HEX 格式 | | alias | string | 否 | 别名，生成额外的 CSS 变量 |

输入示例：

// vite.config.ts
import { defineConfig } from '@tker/vite-config';

export default defineConfig(async (config) => {
  return {
    application: {
      themeColors: [
        // 主色（蓝色），别名 primary
        { name: 'blue', color: 'hsl(212 100% 45%)', alias: 'primary' },
        // 成功色（绿色），别名 success
        { name: 'green', color: 'hsl(161 90% 43%)', alias: 'success' },
        // 警告色（黄色），别名 warning
        { name: 'yellow', color: 'hsl(42 84% 61%)', alias: 'warning' },
        // 危险色（红色），别名 danger
        { name: 'red', color: 'hsl(0 75% 42%)', alias: 'danger' },
      ]
    }
  };
});

默认配置（不传入 themeColors 时）：

[
  { name: 'blue', color: 'hsl(212 100% 45%)', alias: 'primary' },
  { name: 'yellow', color: 'hsl(42 84% 61%)', alias: 'warning' },
  { name: 'green', color: 'hsl(161 90% 43%)', alias: 'success' },
  { name: 'red', color: 'hsl(0 75% 42%)', alias: 'danger' },
]

输出结果：

插件会自动生成完整的色盘（50-900 共 10 个色阶），并注入到 HTML <head> 中：

<style>
:root {
  /* name 生成 */
  --blue-50: 212 100% 95%;
  --blue-100: 212 100% 90%;
  --blue-200: 212 100% 80%;
  --blue-300: 212 100% 70%;
  --blue-400: 212 100% 60%;
  --blue-500: 212 100% 45%;
  --blue-600: 212 100% 35%;
  --blue-700: 212 100% 25%;
  --blue-800: 212 100% 15%;
  --blue-900: 212 100% 10%;
  
  /* alias 生成（与 blue 相同） */
  --primary-50: 212 100% 95%;
  --primary-100: 212 100% 90%;
  --primary-200: 212 100% 80%;
  --primary-300: 212 100% 70%;
  --primary-400: 212 100% 60%;
  --primary-500: 212 100% 45%;
  --primary-600: 212 100% 35%;
  --primary-700: 212 100% 25%;
  --primary-800: 212 100% 15%;
  --primary-900: 212 100% 10%;
  --primary: 212 100% 45%;
}
</style>

CSS 变量使用方式：

/* 在 Tailwind CSS 4.x 中使用 */
@theme {
  --color-primary: hsl(var(--primary));
  --color-primary-500: hsl(var(--primary-500));
  --color-primary-600: hsl(var(--primary-600));
}

/* 或直接在样式中使用 */
.button {
  background-color: hsl(var(--primary-500));
}
.button:hover {
  background-color: hsl(var(--primary-600));
}

色阶说明：

| 阶 | 用途 | |------|------| | 50 | 最浅，用于背景、hover 状态 | | 100-300 | 浅色变体，用于次要元素 | | 400 | 中等偏浅 | | 500 | 标准色，主色调 | | 600 | 较深，用于 hover 状态 | | 700 | 更深，用于 active 状态 | | 800-900 | 最深，用于文字或极端情况 |

Tailwind CSS 配置

启用 tailwind: true 后，会自动加载 @tailwindcss/vite 插件处理 Tailwind CSS。

/* style.css */
@import "tailwindcss";

/* 项目自定义配置 */
@theme {
  --container-center: true;
  --container-padding: 2rem;
}

// vite.config.ts
import { defineConfig } from '@tker/vite-config'

export default defineConfig(async (config) => {
  return {
    application: {
      tailwind: true
    }
  }
})

配合 themeColors 使用

推荐同时配置 themeColors，自动注入 CSS 变量：

// vite.config.ts
import { defineConfig } from '@tker/vite-config'

export default defineConfig(async (config) => {
  return {
    application: {
      tailwind: true,
      themeColors: [
        { name: 'blue', color: 'hsl(212 100% 45%)', alias: 'primary' },
        { name: 'green', color: 'hsl(161 90% 43%)', alias: 'success' },
        { name: 'yellow', color: 'hsl(42 84% 61%)', alias: 'warning' },
        { name: 'red', color: 'hsl(0 75% 42%)', alias: 'danger' },
      ]
    }
  }
})

themeColors 会自动注入 CSS 变量（如 --primary-500），可在 CSS 中直接使用：

@theme {
  --color-primary: hsl(var(--primary));
  --color-primary-500: hsl(var(--primary-500));
}

环境变量

支持通过 .env 文件配置：

| 变量名 | 说明 | |--------|------| | VITE_APP_TITLE | 应用标题，默认 Tker Admin | | VITE_ARCHIVER | 是否开启归档 | | VITE_BASE | 应用基础路径，默认 / | | VITE_COMPRESS | 压缩类型，如 gzip,brotli | | VITE_DEVTOOLS | 是否开启 DevTools | | VITE_INJECT_APP_LOADING | 是否注入加载动画 | | VITE_PORT | 开发服务器端口，默认 5173 | | VITE_VISUALIZER | 是否开启依赖分析 | | VITE_DROP_CONSOLE | 是否去除 console |

自定义加载动画

配置选项

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | injectAppLoading | boolean | true | 是否注入应用加载动画 | | appId | string | '#app' | Vue 应用挂载的目标元素选择器 |

自定义模板

在项目根目录创建 loading.html 文件可自定义加载动画，若不提供则使用内置默认样式。

自定义挂载目标

如果你的 Vue 应用不是挂载到 #app，可以通过 appId 配置：

// vite.config.ts
import { defineConfig } from '@tker/vite-config';

export default defineConfig(async (config) => {
  return {
    application: {
      // Vue 挂载到 #root
      appId: '#root',
    }
  };
});

<!-- index.html -->
<body>
  <div id="root"></div>
</body>

// main.ts
createApp(App).mount('#root')

自动关闭机制

loading 动画会在 Vue 应用挂载后自动关闭（使用 MutationObserver 监听目标元素，当有子元素内容时触发关闭动画），无需手动处理。

版权信息注入

通过 copyright 配置项传入版权信息，构建时会自动注入到入口文件顶部：

// vite.config.ts
import { defineConfig } from '@tker/vite-config';

export default defineConfig(async (config) => {
  return {
    application: {
      copyright: `/*!
 * Project Name
 * Version: 1.0.0
 * Author: Your Name
 * Copyright (C) 2025 Your Company
 * License: MIT License
 */`
    }
  };
});

版权信息模板参考：

// 标准模板
copyright: `/*!
 * ${name}
 * Version: ${version}
 * Author: ${author}
 * Copyright (C) ${year} ${company}
 * License: ${license}
 */`

// 从 package.json 动态获取
const pkg = require('./package.json');
copyright: `/*!
 * ${pkg.name}
 * Version: ${pkg.version}
 * Author: ${pkg.author}
 * Copyright (C) 2025 ${pkg.author}
 * License: ${pkg.license}
 */`

// 带更多信息的模板
copyright: `/*!
 * Project Name - A Modern Admin Dashboard
 * Version: 1.0.0
 * Author: Your Name <[email protected]>
 * Copyright (C) 2025 Your Company
 * License: MIT License
 * Homepage: https://example.com
 * Repository: https://github.com/user/project
 */`

如果不传入 copyright，则不会注入版权信息。

内置插件

@vitejs/plugin-vue - Vue 3 单文件组件支持
@vitejs/plugin-vue-jsx - Vue 3 JSX 支持
vite-plugin-vue-devtools - Vue DevTools（可选）
vite-plugin-html - HTML 模板处理
vite-plugin-compression - 构建压缩
vite-plugin-dts - TypeScript 类型声明生成（库项目）
rollup-plugin-visualizer - 依赖分析可视化

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@tker/vite-config

安装

用法

defineConfig

配置选项

ApplicationOptions（应用项目配置）

LibraryOptions（库项目配置）

ThemeColor（主题颜色配置）

Tailwind CSS 配置

配合 themeColors 使用

环境变量

自定义加载动画

配置选项

自定义模板

自定义挂载目标

自动关闭机制

版权信息注入

内置插件

License