unplugin-version-injector 2.2.0 → 2.3.0

package/README.md

@@ -17,6 +17,8 @@
 ✅ Supports Vite, Webpack 4/5, Rspack, Rollup, Rolldown  
 ✅ Fully compatible with Multi-Page Applications (MPA)  
 ✅ Customizable version, project name, date format, and theme-based console styling  
+✅ Date format supports dayjs-style patterns (`YYYY-MM-DD HH:mm:ss`) with zero extra dependencies  
+✅ Optional: attach a version header (`X-Client-Version`) to `fetch` / `XMLHttpRequest` requests to identify clients in backend logs  
 
 ---
 
@@ -125,47 +127,149 @@ In your final HTML output:
 | `version`        | `string`                          | Custom version number                                  | Read from package.json |
 | `name`           | `string`                          | Custom project name                                    | Read from package.json |
 | `log`            | `boolean`                         | Whether to inject the console log script               | `true`                 |
-| `formatDate`     | `(date: Date) => string`          | Custom build time formatter                            | ISO 8601 format        |
+| `formatDate`     | `string \| ((date: Date) => string)` | Custom build time format: a dayjs-style pattern (e.g. `'YYYY-MM-DD HH:mm:ss'`) or a function | ISO 8601 format        |
 | `requestHeaders` | `boolean \| RequestHeadersOptions` | Attach version/build-time headers to outgoing requests | `false`                |
+| `nonce`          | `string`                          | CSP nonce added to the injected inline `<script>` tags | —                      |
 
 > `version` and `name` can be provided independently — whichever is missing falls back to the nearest `package.json`.
 
 ---
 
+## 📅 Formatting build time (`formatDate`)
+
+`formatDate` accepts two forms, and applies to both the **console banner** and the **`X-Client-Build-Time` header**:
+
+```ts
+// 1) dayjs-style pattern (built-in lightweight impl, no dayjs needed)
+versionInjector({ formatDate: 'YYYY-MM-DD HH:mm:ss' }); // 2024-04-01 12:30:45
+
+// 2) custom function
+versionInjector({ formatDate: (date) => date.getTime().toString() }); // timestamp
+```
+
+Supported tokens: `YYYY YY MMMM MMM MM M DD D dddd ddd dd d HH H hh h mm m ss s SSS SS S A a`.
+
+---
+
 ## 📡 Request Headers (identify clients in backend logs)
 
-Enable `requestHeaders` to patch `window.fetch` and `XMLHttpRequest` so every API request carries the client version — making it trivial to tell which client build produced a request in backend/API logs:
+Enable `requestHeaders` to patch `window.fetch` and `XMLHttpRequest` so requests carry the client version and build time — making it trivial to tell which client build produced a request in backend/API logs. Two headers are injected by default:
+
+```
+X-Client-Version: my-app/1.2.3
+X-Client-Build-Time: 2024-04-01 12:00:00
+```
+
+> Because it patches `fetch` / `XMLHttpRequest`, **axios and most HTTP clients work automatically**. `navigator.sendBeacon` and WebSocket connections cannot carry custom headers and are not covered.
+
+### `RequestHeadersOptions`
+
+| Option | Type | Description | Default |
+|---|---|---|---|
+| `versionHeaderName` | `string` | Version header name; value is `${name}/${version}` | `'X-Client-Version'` |
+| `buildTimeHeaderName` | `string` | Build-time header name; value is the `formatDate` output | `'X-Client-Build-Time'` |
+| `include` | `(string \| RegExp)[]` | Extra **cross-origin** allowlist: string = URL prefix, RegExp = full-URL test. **Same-origin requests are always injected** | `[]` |
+
+### Scenario 1: same-origin (simplest)
+
+Page and API share an origin, or you use a dev-server proxy (requests hit `/api`, which the browser treats as same-origin):
+
+```ts
+versionInjector({ requestHeaders: true }); // true = defaults, same-origin only
+```
+
+### Scenario 2: custom header names
 
 ```ts
 versionInjector({
-  requestHeaders: true, // same-origin requests only
+  requestHeaders: {
+    versionHeaderName: 'X-App-Version',
+    buildTimeHeaderName: 'X-App-Build',
+  },
 });
 ```
 
-Every same-origin request then includes:
+### Scenario 3: a single cross-origin API (most common in prod)
 
+Front end and API are on different origins — add the API origin to `include` (string = URL prefix):
+
+```ts
+versionInjector({
+  requestHeaders: { include: ['https://api.example.com'] },
+});
 ```
-X-Client-Version: my-app/1.2.3
-X-Client-Build-Time: 2024-04-01T12:00:00.000Z
+
+### Scenario 4: multiple cross-origin APIs / RegExp
+
+```ts
+versionInjector({
+  requestHeaders: {
+    include: [
+      'https://api.example.com',
+      'https://auth.example.com',
+      /^https:\/\/[^/]*\.example\.com\//, // any *.example.com subdomain
+    ],
+  },
+});
 ```
 
-Full configuration:
+### Scenario 5: Monorepo + all cross-origin (the trickiest) ⭐
+
+Many packages share one build config, and each app talks to cross-origin APIs that differ per environment (dev / sandbox / prod). Two keys:
+
+**1. Write `include` once in the shared root config** — every package inherits it (put the plugin in the shared `configureWebpack` / `vite` config).
+
+**2. Don't hardcode origins — build them from env vars.** Each app's `.env.*` usually already defines its API origins:
+
+```js
+// shared root build config (webpack example)
+const versionInjector = require('unplugin-version-injector/webpack');
+
+// provided by each app / each environment's .env
+const apiOrigins = [
+  process.env.VUE_APP_API_ORIGIN,
+  process.env.VUE_APP_SDK_API_ORIGIN,
+  process.env.VUE_APP_USER_API_ORIGIN,
+].filter(Boolean);
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      versionInjector({ requestHeaders: { include: apiOrigins } }),
+    ],
+  },
+};
+```
+
+dev / sandbox / prod each get the right origins automatically — no giant hardcoded list.
+
+If all APIs live under a few fixed base domains, a single RegExp also works (new subdomains match automatically):
 
 ```ts
 versionInjector({
   requestHeaders: {
-    versionHeaderName: 'X-Client-Version',      // default
-    buildTimeHeaderName: 'X-Client-Build-Time', // default
-    // Cross-origin URLs to include (string = URL prefix, RegExp = full URL test).
-    // Same-origin requests are always included.
-    include: ['https://api.example.com/', /\.internal\.example\.com/],
+    include: [/^https:\/\/[^/]*\.(example\.io|example\.dev|sandbox-example\.com)\//],
   },
 });
 ```
 
-> ⚠️ **CORS**: custom headers on cross-origin requests trigger a preflight — the server must allow them via `Access-Control-Allow-Headers`. That's why cross-origin injection is opt-in through `include`.
->
-> Note: `navigator.sendBeacon` and WebSocket connections cannot carry custom headers; the patch covers `fetch` and `XMLHttpRequest` (which includes axios and most HTTP clients).
+> Only include API origins you actually `fetch`/`XHR` **and** whose CORS you control. Don't add CDNs or third-party SDK script hosts — that only triggers preflights and can break asset loading.
+
+### ⚠️ Cross-origin requires backend cooperation (CORS preflight)
+
+Custom headers on cross-origin requests trigger an `OPTIONS` preflight. **Every** API service matched by `include` must allow the two headers, or the browser blocks the request:
+
+```
+Access-Control-Allow-Headers: X-Client-Version, X-Client-Build-Time
+```
+
+This is exactly why cross-origin injection is opt-in via `include` rather than on by default.
+
+### 🔍 Same-origin or cross-origin?
+
+Open the browser Network tab and look at the request's **real URL**:
+- `http://localhost:9040/api/...` (via dev proxy) → **same-origin**, `requestHeaders: true` is enough, no `include`.
+- `https://api.xxx.com/...` (direct) → **cross-origin**, must be in `include` + backend must allow the headers.
 
 ---
 

package/README.zh-CN.md

@@ -16,6 +16,8 @@
 ✅ 完美兼容多页面应用（MPA）  
 ✅ 支持自定义版本号、项目名、时间格式，默认读取 `package.json`  
 ✅ 控制台输出支持自动适配深/浅主题配色  
+✅ 时间格式支持 dayjs 风格字符串（`YYYY-MM-DD HH:mm:ss`），零额外依赖  
+✅ 可选：给 `fetch` / `XMLHttpRequest` 请求自动注入版本请求头（`X-Client-Version`），在后端日志中定位客户端版本  
 
 ---
 
@@ -131,46 +133,149 @@ export default {
 | `version`    | `string`  | 自定义版本号                     | 自动读取 package.json |
 | `name`       | `string`  | 自定义项目名                     | 自动读取 package.json |
 | `log`        | `boolean` | 是否输出控制台日志               | `true`              |
-| `formatDate` | `(date: Date) => string` | 自定义时间格式函数         | ISO 格式            |
+| `formatDate` | `string \| ((date: Date) => string)` | 自定义构建时间格式：支持 dayjs 风格字符串（如 `'YYYY-MM-DD HH:mm:ss'`）或函数 | ISO 格式 |
 | `requestHeaders` | `boolean \| RequestHeadersOptions` | 给发出的请求自动附加版本/构建时间请求头 | `false`  |
+| `nonce`      | `string`  | 给注入的内联 `<script>` 加 CSP nonce（严格 CSP 站点需设置） | —  |
 
 > `version` 和 `name` 可以单独传入，缺失的一项会自动从最近的 `package.json` 读取。
 
 ---
 
-## **📡 请求头注入（后端日志定位客户端版本）**
+## **📅 构建时间格式化 `formatDate`**
 
-开启 `requestHeaders` 后，插件会在页面最前面 patch `window.fetch` 和 `XMLHttpRequest`，让所有 API 请求自动带上版本信息——排查前后端请求日志时可以直接看出是哪个客户端、哪个版本发出的请求：
+`formatDate` 支持两种写法，同时作用于**控制台构建时间**和 **`X-Client-Build-Time` 请求头**：
+
+```ts
+// 1) dayjs 风格字符串（内置轻量实现，无需安装 dayjs）
+versionInjector({ formatDate: 'YYYY-MM-DD HH:mm:ss' }); // 2024-04-01 12:30:45
+
+// 2) 自定义函数
+versionInjector({ formatDate: (date) => date.getTime().toString() }); // 时间戳
+```
+
+支持的 token：`YYYY YY MMMM MMM MM M DD D dddd ddd dd d HH H hh h mm m ss s SSS SS S A a`。
+
+---
+
+## **📡 请求头注入（在后端日志中定位客户端版本）**
+
+开启 `requestHeaders` 后，插件会在页面最前面 patch `window.fetch` 和 `XMLHttpRequest`，让请求自动带上版本与构建时间——排查前后端日志时，一眼就能看出是哪个客户端、哪个版本发出的请求。默认注入两个头：
+
+```
+X-Client-Version: my-app/1.2.3
+X-Client-Build-Time: 2024-04-01 12:00:00
+```
+
+> 底层是 patch `fetch` / `XMLHttpRequest`，所以 **axios、umi-request 等主流库都自动生效**；`navigator.sendBeacon` 和 WebSocket 无法携带自定义头，不在覆盖范围。
+
+### 子配置 `RequestHeadersOptions`
+
+| 选项 | 类型 | 说明 | 默认值 |
+|---|---|---|---|
+| `versionHeaderName` | `string` | 版本头名称，值为 `${name}/${version}` | `'X-Client-Version'` |
+| `buildTimeHeaderName` | `string` | 构建时间头名称，值为 `formatDate` 的输出 | `'X-Client-Build-Time'` |
+| `include` | `(string \| RegExp)[]` | 额外注入的**跨域**地址白名单：字符串按 URL 前缀匹配，正则按完整 URL 测试。**同源请求始终注入** | `[]` |
+
+### 场景 1：同源请求（最简单）
+
+页面与 API 同域，或本地走 dev-server 代理（请求发到 `/api`，浏览器视角是同源）：
+
+```ts
+versionInjector({ requestHeaders: true }); // true = 默认配置，仅同源
+```
+
+### 场景 2：自定义请求头名称
 
 ```ts
 versionInjector({
-  requestHeaders: true, // 默认仅同源请求
+  requestHeaders: {
+    versionHeaderName: 'X-App-Version',
+    buildTimeHeaderName: 'X-App-Build',
+  },
 });
 ```
 
-之后每个同源请求都会带上：
+### 场景 3：单个跨域 API（生产最常见）
 
+前端和 API 不同源，把 API 域名加进 `include`（字符串 = URL 前缀）：
+
+```ts
+versionInjector({
+  requestHeaders: { include: ['https://api.example.com'] },
+});
 ```
-X-Client-Version: my-app/1.2.3
-X-Client-Build-Time: 2024-04-01T12:00:00.000Z
+
+### 场景 4：多个跨域 API / 正则批量匹配
+
+```ts
+versionInjector({
+  requestHeaders: {
+    include: [
+      'https://api.example.com',
+      'https://auth.example.com',
+      /^https:\/\/[^/]*\.example\.com\//, // 匹配 *.example.com 所有子域
+    ],
+  },
+});
 ```
 
-完整配置：
+### 场景 5：Monorepo + 全跨域（最容易踩坑）⭐
+
+多包共用一份构建配置、每个子应用又连不同环境（dev / sandbox / prod）的跨域 API——这是最难配的场景。两个关键点：
+
+**① `include` 只需在共享的根配置里写一次**，所有子包继承即可（把插件放进共享的 `configureWebpack` / `vite` 配置）。
+
+**② 域名随环境变化，别硬编码——用环境变量动态拼**。每个子应用的 `.env.*` 里通常已有 API 域名变量，直接读：
+
+```js
+// 共享的根构建配置（以 webpack 为例）
+const versionInjector = require('unplugin-version-injector/webpack');
+
+// 这些变量由各子应用 / 各环境的 .env 提供
+const apiOrigins = [
+  process.env.VUE_APP_API_ORIGIN,
+  process.env.VUE_APP_SDK_API_ORIGIN,
+  process.env.VUE_APP_USER_API_ORIGIN,
+].filter(Boolean); // 去掉未定义的
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      versionInjector({ requestHeaders: { include: apiOrigins } }),
+    ],
+  },
+};
+```
+
+这样 dev / sandbox / prod 各自带对应域名，不用维护一份大清单。
+
+若所有 API 都在固定的几个主域名下，也可以直接用一条正则（新增子域自动命中）：
 
 ```ts
 versionInjector({
   requestHeaders: {
-    versionHeaderName: 'X-Client-Version',      // 默认值
-    buildTimeHeaderName: 'X-Client-Build-Time', // 默认值
-    // 跨域白名单：字符串按 URL 前缀匹配，正则按完整 URL 测试；同源请求始终注入
-    include: ['https://api.example.com/', /\.internal\.example\.com/],
+    include: [/^https:\/\/[^/]*\.(example\.io|example\.dev|sandbox-example\.com)\//],
   },
 });
 ```
 
-> ⚠️ **CORS 注意**：给跨域请求加自定义头会触发预检（preflight），服务端必须在 `Access-Control-Allow-Headers` 中放行这两个头，否则请求会失败——所以跨域注入设计为通过 `include` 显式开启。
->
-> 说明：`navigator.sendBeacon` 和 WebSocket 无法携带自定义请求头；补丁覆盖 `fetch` 与 `XMLHttpRequest`（axios 等主流 HTTP 客户端底层都走这两条路）。
+> 只把**你自己发 fetch/XHR、且能改 CORS 的 API 域名**放进去。CDN、第三方 SDK 脚本域（你控制不了 CORS）不要加，否则只会触发预检导致资源加载失败。
+
+### ⚠️ 跨域必读：后端要放行（CORS 预检）
+
+给跨域请求加自定义头，浏览器会先发一个 `OPTIONS` 预检。`include` 命中的**每一个** API 服务都必须在响应里放行这两个头，否则请求会被浏览器拦掉：
+
+```
+Access-Control-Allow-Headers: X-Client-Version, X-Client-Build-Time
+```
+
+多后端场景要逐个确认。这也是跨域注入必须通过 `include` 显式开启、而非默认全开的原因。
+
+### 🔍 怎么判断请求是同源还是跨域？
+
+打开浏览器 Network，看请求的**真实 URL**：
+- `http://localhost:9040/api/...`（走 dev 代理）→ **同源**，`requestHeaders: true` 就够，不用 `include`；
+- `https://api.xxx.com/...`（直连）→ **跨域**，必须加进 `include` + 后端放行。
 
 ---
 

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { UnpluginInstance, UnpluginFactory } from 'unplugin';
-import { V as VersionInjectorOptions } from './types-Cc-nzIS0.mjs';
-export { R as RequestHeadersOptions } from './types-Cc-nzIS0.mjs';
+import { V as VersionInjectorOptions } from './types-CLRw9rBI.mjs';
+export { R as RequestHeadersOptions } from './types-CLRw9rBI.mjs';
 
 declare const unpluginFactory: UnpluginFactory<VersionInjectorOptions | undefined>;
 declare const VersionInjector: UnpluginInstance<VersionInjectorOptions | undefined>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { UnpluginInstance, UnpluginFactory } from 'unplugin';
-import { V as VersionInjectorOptions } from './types-Cc-nzIS0.js';
-export { R as RequestHeadersOptions } from './types-Cc-nzIS0.js';
+import { V as VersionInjectorOptions } from './types-CLRw9rBI.js';
+export { R as RequestHeadersOptions } from './types-CLRw9rBI.js';
 
 declare const unpluginFactory: UnpluginFactory<VersionInjectorOptions | undefined>;
 declare const VersionInjector: UnpluginInstance<VersionInjectorOptions | undefined>;

package/dist/index.js

@@ -102,18 +102,27 @@ function toScriptString(value) {
 var INJECTED_MARK = 'data-injected="unplugin-version-injector"';
 var HEADERS_INJECTED_MARK = 'data-injected="unplugin-version-injector-headers"';
 var HEADER_NAME_RE = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/;
+var DEFAULT_VERSION_HEADER = "X-Client-Version";
+var DEFAULT_BUILD_TIME_HEADER = "X-Client-Build-Time";
 function normalizeRequestHeaders(opt) {
-  var _a, _b, _c;
   if (!opt) return null;
   const o = typeof opt === "object" ? opt : {};
-  const versionHeaderName = (_a = o.versionHeaderName) != null ? _a : "X-Client-Version";
-  const buildTimeHeaderName = (_b = o.buildTimeHeaderName) != null ? _b : "X-Client-Build-Time";
-  for (const h of [versionHeaderName, buildTimeHeaderName]) {
-    if (!HEADER_NAME_RE.test(h)) {
-      throw new Error(`[VersionInjector] invalid request header name: "${h}"`);
-    }
-  }
-  return { versionHeaderName, buildTimeHeaderName, include: (_c = o.include) != null ? _c : [] };
+  const pickHeaderName = (value, fallback) => {
+    if (value == null) return fallback;
+    if (HEADER_NAME_RE.test(value)) return value;
+    console.warn(
+      `[VersionInjector] invalid request header name "${value}", falling back to "${fallback}"`
+    );
+    return fallback;
+  };
+  const include = (Array.isArray(o.include) ? o.include : []).filter(
+    (p) => typeof p === "string" || p instanceof RegExp
+  );
+  return {
+    versionHeaderName: pickHeaderName(o.versionHeaderName, DEFAULT_VERSION_HEADER),
+    buildTimeHeaderName: pickHeaderName(o.buildTimeHeaderName, DEFAULT_BUILD_TIME_HEADER),
+    include
+  };
 }
 function sanitizeHeaderValue(value) {
   return value.replace(/[^\t\x20-\x7E]/g, "").trim();
@@ -124,6 +133,7 @@ function serializeInclude(patterns) {
   );
   return `[${items.join(", ")}]`;
 }
+var HEAD_OPEN_RE = /<head(\s[^>]*)?>/i;
 function createVersionInjector(options = {}) {
   const pkg = options.version && options.name ? { version: options.version, name: options.name } : getPackageVersion();
   const version = options.version || pkg.version;
@@ -131,25 +141,34 @@ function createVersionInjector(options = {}) {
   const formatDateOpt = options.formatDate;
   const formatDate2 = typeof formatDateOpt === "string" ? (date) => formatDate(date, formatDateOpt) : formatDateOpt != null ? formatDateOpt : defaultFormatDate;
   const headersConfig = normalizeRequestHeaders(options.requestHeaders);
+  let cachedBuildTime = null;
+  const getBuildTime = () => {
+    if (cachedBuildTime === null) cachedBuildTime = formatDate2(/* @__PURE__ */ new Date());
+    return cachedBuildTime;
+  };
+  const nonceAttr = options.nonce ? ` nonce="${escapeHtml(options.nonce)}"` : "";
   const metaTag = `<meta name="version" content="${escapeHtml(version)}">
 <meta name="project" content="${escapeHtml(name)}">
 `;
   const buildLogScript = (buildTime) => `
-<script ${INJECTED_MARK}>
+<script${nonceAttr} ${INJECTED_MARK}>
   (function () {
-    var isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    var bg = isDark ? '#ffffff' : '#1e1e1e';
-    var base = 'background: ' + bg + '; border-radius: 4px; padding: 4px; font-size: 12px;';
-    console.log('%c' + ${toScriptString(` ${name}@${version} `)}, base + ' color: #00c853;');
-    console.log('%c' + ${toScriptString(` Build Time: ${buildTime} `)}, base + ' color: #ffab00;');
+    try {
+      var isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      var bg = isDark ? '#ffffff' : '#1e1e1e';
+      var base = 'background: ' + bg + '; border-radius: 4px; padding: 4px; font-size: 12px;';
+      console.log('%c' + ${toScriptString(` ${name}@${version} `)}, base + ' color: #00c853;');
+      console.log('%c' + ${toScriptString(` Build Time: ${buildTime} `)}, base + ' color: #ffab00;');
+    } catch (e) {}
   })();
 </script>`;
   const buildHeaderScript = (buildTime, cfg) => {
     const versionValue = sanitizeHeaderValue(`${name}/${version}`);
     const buildValue = sanitizeHeaderValue(buildTime);
     return `
-<script ${HEADERS_INJECTED_MARK}>
+<script${nonceAttr} ${HEADERS_INJECTED_MARK}>
   (function () {
+    try {
     if (window.__UVI_HEADERS_PATCHED__) return;
     window.__UVI_HEADERS_PATCHED__ = true;
     var VERSION_HEADER = ${toScriptString(cfg.versionHeaderName)};
@@ -173,13 +192,21 @@ function createVersionInjector(options = {}) {
       }
     }
 
+    function matchesPrefix(href, p) {
+      if (href.indexOf(p) !== 0) return false;
+      // \u524D\u7F00\u672C\u8EAB\u4EE5 / \u7ED3\u5C3E\uFF0C\u6216\u524D\u7F00\u540E\u7D27\u8DDF\u8FB9\u754C\u5B57\u7B26\uFF0C\u907F\u514D 'https://api.x.com' \u547D\u4E2D 'https://api.x.com.evil.com'
+      if (p.charAt(p.length - 1) === '/') return true;
+      var next = href.charAt(p.length);
+      return next === '' || next === '/' || next === '?' || next === '#';
+    }
+
     function shouldInject(url) {
       var u = resolveUrl(url == null ? '' : String(url));
       if (!u || (u.protocol !== 'http:' && u.protocol !== 'https:')) return false;
       if (u.protocol === location.protocol && u.host === location.host) return true;
       for (var i = 0; i < INCLUDE.length; i++) {
         var p = INCLUDE[i];
-        if (typeof p === 'string' ? u.href.indexOf(p) === 0 : p.test(u.href)) return true;
+        if (typeof p === 'string' ? matchesPrefix(u.href, p) : p.test(u.href)) return true;
       }
       return false;
     }
@@ -228,29 +255,37 @@ function createVersionInjector(options = {}) {
         };
       }
     }
+    } catch (e) {}
   })();
 </script>`;
   };
   const processHtml = function processHtml2(html) {
-    const buildTime = formatDate2(/* @__PURE__ */ new Date());
-    if (!html.includes('<meta name="version"')) {
-      html = html.replace(/<head[^>]*>/i, (match) => `${match}
+    const original = html;
+    try {
+      const buildTime = getBuildTime();
+      if (!html.includes('<meta name="version"')) {
+        html = html.replace(HEAD_OPEN_RE, (match) => `${match}
   ${metaTag}`);
-    }
-    if (headersConfig && !html.includes(HEADERS_INJECTED_MARK)) {
-      const headerScript = buildHeaderScript(buildTime, headersConfig);
-      html = html.replace(/<head[^>]*>/i, (match) => `${match}
+      }
+      if (headersConfig && !html.includes(HEADERS_INJECTED_MARK)) {
+        const headerScript = buildHeaderScript(buildTime, headersConfig);
+        html = html.replace(HEAD_OPEN_RE, (match) => `${match}
   ${headerScript}
 `);
-    }
-    if (options.log !== false && !html.includes(INJECTED_MARK)) {
-      const logScript = buildLogScript(buildTime);
-      html = html.replace(/<\/body>/i, () => `  ${logScript}
+      }
+      if (options.log !== false && !html.includes(INJECTED_MARK)) {
+        const logScript = buildLogScript(buildTime);
+        html = html.replace(/<\/body>/i, () => `  ${logScript}
 </body>`);
+      }
+      return html;
+    } catch (err) {
+      console.warn("[VersionInjector] injection failed, returning original HTML unchanged:", err);
+      return original;
     }
-    return html;
   };
   processHtml.resetBuildTime = () => {
+    cachedBuildTime = null;
   };
   return processHtml;
 }
@@ -305,6 +340,10 @@ var unpluginFactory = (options = {}) => {
   const inject = createVersionInjector(options);
   return {
     name: PLUGIN_NAME,
+    // 每轮（重）构建开始时重置构建时间缓存：watch 重建刷新时间，同一次构建里 MPA 各页保持一致
+    buildStart() {
+      inject.resetBuildTime();
+    },
     vite: {
       transformIndexHtml(html) {
         return inject(html);