🧩 打包自动注入项目名 + 版本号，我用这个插件效率翻倍了
“版本号、项目名、构建时间，能不能一次注入、自动更新、还有主题切换样式？”
可以，现在 unplugin-version-injector 插件更新了，正式支持：
- ✅ 自动注入 project name（来自 package.json.name）
- ✅ 自动注入 version（来自 package.json.version）
- ✅ 自动注入 build time（构建时间戳）
- ✅ 自动注入 git commit hash（可选）
- ✅ 新增：支持自动切换 UI 主题（基于项目名）
🚀 插件简介：为构建注入一切你想要的“标识”
很多前端项目打包后上线，但你可能遇到这些问题：
-
用户报错，你不知道是哪个版本；
-
多项目共用一套 UI，但项目名混淆；
-
不同项目打包出来，UI 配色或主题难区分；
-
想做自动“夜间/浅色模式切换”，但手动维护太麻烦；
现在只需要安装这个插件 👇：
pnpm add @unplugin-version-injector -D
配置：
// vite.config.ts
import { versionInjector } from '@unplugin-version-injector/vite'
export default {
plugins: [
versionInjector({
injectToEnv: true,
enableThemeSwitch: true,
}),
],
}
📦 本次更新重点
1️⃣ ✅ 注入
project name
以前只能注入版本号，现在直接注入 package.json.name，你可以这样使用：
console.log(import.meta.env.PROJECT_NAME)
- 日志、上报、埋点都能携带当前项目名
- 多项目共用部署时也能清晰区分
- 页面标题 / 主题颜色也能自动适配项目
2️⃣ ✅ 自动主题切换（亮点！）
这是本次最大亮点：你可以根据项目名自动切换 UI 主题。
场景：
-
你有多个子项目，共用同一套组件库
-
每个项目主题风格不同（如 admin / user / console）
-
每次构建都要手动改颜色或变量，麻烦！
配置方式：
plugins: [
versionInjector(),
....
]
💡 Bonus：自动判断系统主题
你还可以加上对系统暗色模式的判断，实现双重自动切换：
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
const project = import.meta.env.PROJECT_NAME
🧪 输出内容预览（真实截图展示）
启用 injectToEnv: true 后，插件会自动注入以下内容：
✅ 浅色主题控制台输出
🌙 深色（暗色）主题控制台输出
- VERSION：版本号
- PROJECT_NAME：项目名
- BUILD_TIME：构建时间
🧩 页面注入的 meta 标签：
最终构建时会自动在 HTML 注入：
<meta name="version" content="0.165.1">
<meta name="project" content="xxx-admin">
非常适合用于页面监控、上报 SDK 或 SEO 信息识别。
📦 应用场景汇总
| 场景 | 示例 |
|---|---|
| 日志埋点版本跟踪 | track({ version: import.meta.env.VERSION }) |
| 多项目区分 UI 风格 | themeMap + html.class |
| 页面底部显示版本 | v{VERSION} |
| 自动切换主题 | matchMedia + project name |
| 页面注入版本信息 |
🔗 开源地址
插件已开源，欢迎 Star 与交流：
-
GitHub：
-
NPM 包名：
👉 @unplugin-version-injector/vite
👉 @unplugin-version-injector/webpack
👉 @unplugin-version-injector/rollup
🧭 最后一句话
构建阶段注入项目元信息，不仅能提升「上线可观察性」，还能增强「主题灵活性 + 多项目复用」能力。
一个版本号插件，也能帮你少踩很多坑。
