get-version-info 使用教程

npm地址:https://www.npmjs.com/package/get-version-info

按下面顺序操作，即可在部署后的F12控制台里查看 version.json 中的版本信息（支持 Vue 2 / 3，Vite、Webpack、Vue CLI 等；非 Vue 见文末）。

你会得到什么

打包产物目录里会有一份 version.json，一般包含四项：

| 字段 | 含义 | |------|------| | version | 版本号（只在文件里改，见第 4 步） | | buildTime | 生成该文件时的北京时间 | | builder | Git 分支名或非 Git 时的固定说明 | | buildSize | 产物目录总体积 |

部署后：推荐使用Ctrl+Shift+V快捷键查看版本信息。请先 用鼠标点一下左侧网页内容区（让焦点回到页面，不要让焦点在F12的Console的输入框里）。也可手动输入 gv() / getVersionInfo()，或查看 __GET_VERSION_INFO_LAST__。

重要：浏览器不会把控制台里敲的快捷键交给页面脚本，所以「只点控制台、不按页面」时 Ctrl+Shift+V 不会触发——必须先让页面获得焦点。

第 1 步：安装依赖

在你的业务项目根目录执行：

npm install get-version-info

第 2 步：修改「打包」脚本（必须先打包，再生成）

在业务项目的 package.json 里找到 scripts.build，改成：

「原来的打包命令」 + && + 「生成 version.json 的命令」

• 顺序不能反：一定要先打出静态文件，再跑生成脚本；否则 buildSize 不准。
• --build-path 后面的目录，必须和真实产物目录一致（Vite 的 build.outDir、Webpack 的 output.path、Vue CLI 的 outputDir）。

2.1 使用 Vite（Vue 3 常见）

产物默认是 dist 时：

{
  "scripts": {
    "build": "vite build && node ./node_modules/get-version-info/build/version-generator.cjs --build-path dist"
  }
}

若 vite.config 里 build.outDir 不是 dist，把上面命令最后的 dist 替换为项目真实的产物目录。

2.2 使用 Vue CLI（vue-cli-service，Vue 2 常见）

把 dist 换成你 vue.config.js 里的 outputDir：

{
  "scripts": {
    "build": "vue-cli-service build && node ./node_modules/get-version-info/build/version-generator.cjs --build-path dist"
  }
}

2.3 使用 Webpack（自行配置）

把 dist 换成你的 output.path 对应目录名：

{
  "scripts": {
    "build": "webpack --mode production && node ./node_modules/get-version-info/build/version-generator.cjs --build-path dist"
  }
}

2.4 可选参数（一般不用改）

• --output <dir>：version.json 单独输出目录（默认与 --build-path 相同）
• --quiet：少打日志

第 3 步：在入口注册插件

3.1 Vue 3 + Vite（main.js / main.ts）

import { createApp } from 'vue'
import App from './App.vue'
//1.导入版本信息显示库
import VueVersionDisplay from 'get-version-info'

const app = createApp(App)

//2.注册VueVersionDisplay 插件（可不写配置：默认拉取与 index.html 同级的 version.json）
app.use(VueVersionDisplay)
app.mount('#app')

可选配置（传给 app.use 的第二个参数即可）：

• 关闭快捷键：enableShortcut: false。
• versionFile 一般不用写：默认会请求与当前页面 index.html 同目录下的 version.json，多数项目够用。
• 只有用 Vite 且刻意改了 vite.config 里的 base 时，若你希望版本文件的请求地址和静态资源的「站点前缀」完全一致，再写：
  versionFile: import.meta.env.BASE_URL + 'version.json'
  （BASE_URL 就是构建时那份 base；若没改 base，写不写通常效果与默认相近。）

示例：

app.use(VueVersionDisplay, {
  enableShortcut: false,
  // versionFile: import.meta.env.BASE_URL + 'version.json', // 仅在上文说明的场景下再打开
})

3.2 Vue 2 + Vue CLI 或 Webpack（main.js）

一般只写 Vue.use(VueVersionDisplay)：默认会请求与当前 index.html 同级的 version.json。

import Vue from 'vue'
import VueVersionDisplay from 'get-version-info'

Vue.use(VueVersionDisplay)

仅在少数情况再显式传 versionFile：例如必须用站点根下的绝对路径、或 <base href> 与真实静态目录不一致时：

Vue.use(VueVersionDisplay, {
  versionFile: '/你的前缀/version.json',
})

• 以 / 开头：相对域名根。
• 不以 / 开头：相对 document.baseURI（与默认规则相同）。

若打包报错 Module parse failed / Unexpected token（Vue CLI 常见）：在 vue.config.js 里增加：

module.exports = {
  transpileDependencies: ['get-version-info'],
}

保存后重新执行 npm run build。

第 4 步：版本号只在 version.json 里维护

1. 按第 2 步执行一次 npm run build，产物目录里会出现 version.json。
2. 第一次生成时，version 是一段占位说明；用编辑器打开产物里的 version.json，把 version 改成你的真实版本号（如 v1.2.3）。
3. 之后每次再打包：生成脚本会保留你已写好的 version，只更新 buildTime、builder、buildSize 等。

部署后浏览器看到的是服务器上当前这份 version.json（有缓存可强刷）。

第 5 步：部署后在浏览器里验证

1. 打开 F12 → Console。
2. 用鼠标点击左侧网页（正文区域），使焦点在页面上；再按 Ctrl+Shift+V，即打印出版本信息。
3. 也可在控制台输入 gv()、getVersionInfo()，或 __GET_VERSION_INFO_LAST__。
4. 若生产构建删掉了全部 console，请用 __GET_VERSION_INFO_LAST__ / await gv()，或 Network 里看 version.json。

附录：version.json 示例

首次生成后（版本号手改前）大致如下：

{
  "version": "未指定版本号，请在version.json中填入",
  "buildTime": "2026-04-23 20:06:25",
  "builder": "junfeng.nie",
  "buildSize": "2.35 MB"
}

手改 version 后再部署即可。builder：有 Git 用分支名，无 Git 为「非Git仓库项目，无法获取构建人」，可手动更改。GitLab CI 可用对应环境变量。

附录：非 Vue 项目

在入口 JS 里：

import { attachGetVersionInfo } from 'get-version-info'

attachGetVersionInfo({
  // versionFile 可省略，默认与 index.html 同级的 version.json
  // enableShortcut: false,
})