@keyblade/vite-plugin-vue-pro 1.0.13 → 1.0.14

package/es/plugins/log-page-route.d.ts

@@ -8,9 +8,11 @@ export interface LogPageRouteOptions {
 /**
  * 开发环境下，在控制台输出当前访问页面对应的源码文件路径（可点击跳转）。
  *
- * 由前端注入脚本上报当前路由，服务端根据路由解析对应的 .vue 文件：
- * 依次尝试 `<basePath>/<route>/index.vue` 与 `<basePath>/<route>.vue`；
- * 若末段含连字符（如 `route-search-query-detail` 实际对应 `route-search-query/detail.vue`），
- * 还会把连字符当作潜在的目录分隔符逐一尝试。
+ * 优先方案：前端读取 vue-router 当前匹配组件的 `__file`（@vitejs/plugin-vue 在 dev 注入的真实源码路径）
+ * 直接上报，服务端原样打印——可精确处理动态参数、URL 编码、任意嵌套等所有情况。
+ *
+ * 兜底方案：当拿不到 `__file` 时（如未用 vue-router、挂载结构特殊），前端上报路由字符串，
+ * 服务端按约定推断 `.vue` 文件：先试 `<route>/index.vue` 与 `<route>.vue`，
+ * 再把末段连字符当作潜在目录分隔符尝试，并逐级回退末尾段以应对动态参数。
  */
 export default function logPageRoute(options?: LogPageRouteOptions): Plugin;

package/es/plugins/log-page-route.js

@@ -1,83 +1,132 @@
-import y from "node:fs";
-import r from "node:path";
-const S = "POST";
-function R(m) {
-  const { basePath: u = "src/views", outputPrefix: f = "web" } = m || {};
-  let h = "";
-  function g(o) {
-    for (const t of o) {
-      const e = r.resolve(process.cwd(), t);
-      if (y.existsSync(e))
+import T from "node:fs";
+import i from "node:path";
+const w = "POST";
+function P(h) {
+  const { basePath: c = "src/views", outputPrefix: p = "web" } = h || {};
+  let d = "";
+  function l(e) {
+    const t = e.replace(/\\/g, "/");
+    return p ? i.join(p, t).replace(/\\/g, "/") : t;
+  }
+  function f(e) {
+    for (const t of e) {
+      const o = i.resolve(process.cwd(), t);
+      if (T.existsSync(o))
         return t.replace(/\\/g, "/");
     }
     return "";
   }
-  function v(o) {
-    if (!o)
-      return g([r.join(u, "index.vue")]);
-    const t = o.split("/"), e = t.pop() || "", i = t.join("/"), l = [
-      r.join(u, i, e, "index.vue"),
-      r.join(u, i, `${e}.vue`)
-    ], s = e.split("-");
-    for (let n = s.length - 1; n >= 1; n--) {
-      const a = s.slice(0, n).join("-"), c = s.slice(n).join("-");
-      l.push(r.join(u, i, a, `${c}.vue`)), l.push(r.join(u, i, a, c, "index.vue"));
+  function g(e) {
+    if (!e) return "";
+    const t = i.isAbsolute(e) ? i.relative(process.cwd(), e) : e;
+    return t.startsWith("..") ? e.replace(/\\/g, "/") : l(t);
+  }
+  function m(e, t) {
+    const o = [
+      i.join(c, e, t, "index.vue"),
+      i.join(c, e, `${t}.vue`)
+    ], r = t.split("-");
+    for (let n = r.length - 1; n >= 1; n--) {
+      const u = r.slice(0, n).join("-"), s = r.slice(n).join("-");
+      o.push(i.join(c, e, u, `${s}.vue`)), o.push(i.join(c, e, u, s, "index.vue"));
+    }
+    return o;
+  }
+  function v(e) {
+    if (!e)
+      return l(f([i.join(c, "index.vue")]));
+    let t = e;
+    try {
+      t = decodeURIComponent(e);
+    } catch (r) {
+    }
+    const o = t.split("/").filter(Boolean);
+    for (let r = o.length; r >= 1; r--) {
+      const n = o.slice(0, r), u = n[n.length - 1] || "", s = n.slice(0, -1).join("/"), a = f(m(s, u));
+      if (a) return l(a);
     }
-    return g(l);
+    return "";
+  }
+  function _(e) {
+    !e || e === d || (d = e, console.info(`\x1B[32m➜ \x1B[37m正在访问: \x1B[36m${e}\x1B[0m`));
   }
   return {
     name: "keyblade-pro-log-page-route",
     enforce: "pre",
     apply: "serve",
-    configureServer(o) {
-      o.middlewares.use("/__log_page_route", (t, e, i) => {
-        if (t.method !== S)
-          return i();
-        const l = 1e3 * 10, s = setTimeout(() => {
-          e.statusCode = 504, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ success: !1, error: "Gateway Timeout" }));
-        }, l);
-        let n = "";
+    configureServer(e) {
+      e.middlewares.use("/__log_page_route", (t, o, r) => {
+        if (t.method !== w)
+          return r();
+        const n = 1e3 * 10, u = setTimeout(() => {
+          o.statusCode = 504, o.setHeader("Content-Type", "application/json"), o.end(JSON.stringify({ success: !1, error: "Gateway Timeout" }));
+        }, n);
+        let s = "";
         t.on("data", (a) => {
-          n += a;
+          s += a;
         }), t.on("end", () => {
           try {
-            const { route: a } = JSON.parse(n), c = a.replace(/^\//, "").replace(/\/$/, "").split("?")[0], d = v(c);
-            if (d) {
-              const p = f ? r.join(f, d).replace(/\\/g, "/") : d;
-              if (p === h) {
-                clearTimeout(s), e.statusCode = 200, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ success: !0 }));
-                return;
-              }
-              h = p, console.info(`\x1B[32m➜ \x1B[37m正在访问: \x1B[36m${p}\x1B[0m`);
-            }
+            const { file: a, route: y } = JSON.parse(s), S = String(y || "").replace(/^\//, "").replace(/\/$/, "").split("?")[0] || "", j = a ? g(a) : v(S);
+            _(j);
           } catch (a) {
           }
-          clearTimeout(s), e.statusCode = 200, e.setHeader("Content-Type", "application/json"), e.end(JSON.stringify({ success: !0 }));
+          clearTimeout(u), o.statusCode = 200, o.setHeader("Content-Type", "application/json"), o.end(JSON.stringify({ success: !0 }));
         });
       });
     },
-    transformIndexHtml(o) {
-      return o.replace("</head>", `
+    transformIndexHtml(e) {
+      return e.replace("</head>", `
 <script>
   (function() {
     if (window.__logPageRouteInitialized) return;
     window.__logPageRouteInitialized = true;
 
-    function getRoute() {
-      var hash = location.hash;
-      if (hash && hash.length > 1) {
-        return hash.slice(1).split('?')[0];
+    var lastSent = '';
+    var sendTimer = null;
+
+    // 找到 Vue 应用实例（Vue3 会在挂载容器上挂 __vue_app__）
+    function getApp() {
+      var selectors = ['#app', '#root'];
+      for (var i = 0; i < selectors.length; i++) {
+        var el = document.querySelector(selectors[i]);
+        if (el && el.__vue_app__) return el.__vue_app__;
+      }
+      if (document.body) {
+        var nodes = document.body.querySelectorAll('*');
+        for (var j = 0; j < nodes.length; j++) {
+          if (nodes[j].__vue_app__) return nodes[j].__vue_app__;
+        }
       }
-      var pathname = location.pathname;
-      return (pathname || '/').split('?')[0];
+      return null;
     }
 
-    var lastRoute = '';
-    var lastHref = location.href;
-    var sendTimer = null;
+    // 读取 vue-router 当前匹配的最深层组件的 __file（dev 下由 @vitejs/plugin-vue 注入）
+    function getMatchedFile() {
+      try {
+        var app = getApp();
+        if (!app || !app.config || !app.config.globalProperties) return '';
+        var router = app.config.globalProperties.$router;
+        if (!router || !router.currentRoute || !router.currentRoute.value) return '';
+        var matched = router.currentRoute.value.matched || [];
+        for (var i = matched.length - 1; i >= 0; i--) {
+          var comps = matched[i].components || {};
+          for (var key in comps) {
+            var c = comps[key];
+            if (c && c.__file) return c.__file;
+          }
+        }
+      } catch (e) {}
+      return '';
+    }
 
-    function doSend(route) {
-      var data = JSON.stringify({ route: route });
+    function getRoute() {
+      var hash = location.hash;
+      if (hash && hash.length > 1) return hash.slice(1).split('?')[0];
+      return (location.pathname || '/').split('?')[0];
+    }
+
+    function post(payload) {
+      var data = JSON.stringify(payload);
       if (navigator.sendBeacon) {
         navigator.sendBeacon('/__log_page_route', new Blob([data], { type: 'application/json' }));
       } else {
@@ -90,54 +139,53 @@ function R(m) {
       }
     }
 
-    function sendRoute() {
-      var route = getRoute();
-      if (!route) {
-        route = '/';
+    // 异步路由组件可能尚未加载完成，重试若干次后回退到上报路由
+    function report(attempt) {
+      attempt = attempt || 0;
+      var file = getMatchedFile();
+      if (file) {
+        if (file === lastSent) return;
+        lastSent = file;
+        post({ file: file });
+        return;
+      }
+      if (attempt < 10) {
+        setTimeout(function() { report(attempt + 1); }, 120);
+        return;
       }
-      route = route.replace(/\\/$/, '') || '/';
-      if (route === lastRoute) return;
-      lastRoute = route;
+      var route = getRoute().replace(/\\/$/, '') || '/';
+      if (route === lastSent) return;
+      lastSent = route;
+      post({ route: route });
+    }
 
+    function schedule() {
       if (sendTimer) clearTimeout(sendTimer);
-      sendTimer = setTimeout(function() {
-        doSend(route);
-      }, 100);
+      sendTimer = setTimeout(function() { report(0); }, 100);
     }
 
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', sendRoute);
+      document.addEventListener('DOMContentLoaded', schedule);
     } else {
-      sendRoute();
+      schedule();
     }
-    window.addEventListener('hashchange', sendRoute);
+    window.addEventListener('hashchange', schedule);
+    window.addEventListener('popstate', schedule);
     var originalPushState = history.pushState;
     var originalReplaceState = history.replaceState;
     history.pushState = function() {
       originalPushState.apply(history, arguments);
-      var newHref = location.href;
-      if (newHref !== lastHref) {
-        lastHref = newHref;
-        sendRoute();
-      }
+      schedule();
     };
     history.replaceState = function() {
       originalReplaceState.apply(history, arguments);
-      var newHref = location.href;
-      if (newHref !== lastHref) {
-        lastHref = newHref;
-        sendRoute();
-      }
+      schedule();
     };
-    window.addEventListener('popstate', function() {
-      lastHref = location.href;
-      sendRoute();
-    });
   })();
 <\/script>` + "</head>");
     }
   };
 }
 export {
-  R as default
+  P as default
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/vite-plugin-vue-pro",
   "description": "KeyBlade Vite Plugin Vue Pro",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": false,
   "type": "module",
   "main": "es/index.js",