Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

fix: devtools not working over lan ip when using `--public` flag

Đang mở
  • Có gì không ổn?
#1,118 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
65/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
node.js, typescript, vite
Lĩnh vực
developer-experience, devtools

Hướng nghiên cứu

The patch is against dist/chunks/module-main.mjs, so start by locating its source (the module entry under packages/devtools/src) and the nuxt.hook("listen") handler that sets publicDevServerOrigin. From there trace how origins/hosts flow into the Vite devtools config (extendViteDevToolsConfig, allowedOrigins, @vitejs/devtools DevTools() options) and Vite's server.host/allowedHosts. Done looks like: running nuxt dev --public and opening devtools from a LAN IP succeeds, while localhost-only defaults stay intact; verify against existing devtools e2e tests if present.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
🐛 The bug

When running nuxt dev --public, the devtools don't work when trying to access them from another computer on the same local network.

I depend on this because i always have the project running on one computer and access the site from a couple different computers on the same network.

🛠️ To reproduce

Run any project using devtools v4 via nuxt dev --public and try to open the devtools while accessing the website via the lan ip address.

🌈 Expected behavior

The devtools should expose the websocket to the same hosts nuxt itself does.

This may also affect people who depend on other flags like --tunnel or --host although I haven't tested that myself.

ℹ️ Additional context

I had an agent write a pnpm patch to workaround the issue. Leaving it here in case it can help others.

@[email protected] 
diff --git a/dist/chunks/module-main.mjs b/dist/chunks/module-main.mjs
@@ -3454,7 +3454,33 @@
     version,
     resolveFrom: import.meta.url
   };
+}
+function isLoopbackHost(hostname) {
+  const h = hostname.replace(/^\[|\]$/g, "");
+  return h === "localhost" || h.endsWith(".localhost") || h === "::1" || /^127(?:\.\d{1,3}){3}$/.test(h);
 }
+async function allowDevtoolsOrigins(listener, target) {
+  const explicit = process.env.NUXT_DEVTOOLS_ALLOWED_ORIGINS?.split(",").map((value) => value.trim()).filter(Boolean);
+  if (explicit?.length) {
+    target.push(...explicit.filter((origin) => !target.includes(origin)));
+    return target;
+  }
+  if (typeof listener?.getURLs !== "function") return target;
+  let urls;
+  try {
+    urls = await listener.getURLs();
+  } catch {
+    return target;
+  }
+  for (const { url } of urls || []) {
+    try {
+      const { origin, hostname } = new URL(url);
+      if (isLoopbackHost(hostname) || target.includes(origin)) continue;
+      target.push(origin);
+    } catch {}
+  }
+  return target;
+}
 async function enableModule(options, nuxt) {
   if (process.env.TEST || process.env.NODE_ENV === "test" || nuxt.options.test)
     return;
@@ -3511,10 +3537,16 @@
   const clientAssetsSource = isSelfClient ? void 0 : resolveClientAssetsSource();
   const clientUrl = clientAssetsSource ? `${ROUTE_CLIENT}/` : `${nuxt.options.app.baseURL || "/"}/`.replace(MULTIPLE_SLASHES_RE, "/");
   let publicDevServerOrigin;
-  nuxt.hook("listen", (_server, listener) => {
+  const lanAllowedOrigins = [];
+  nuxt.hook("listen", async (_server, listener) => {
     if (listener?.url)
       publicDevServerOrigin = new URL(listener.url).origin;
+    await allowDevtoolsOrigins(listener, lanAllowedOrigins);
+    if (lanAllowedOrigins.length) publicDevServerOrigin = lanAllowedOrigins[0];
   });
+  extendViteConfig((config) => {
+    if (config.server?.allowedHosts === true && !config.server.host) config.server.host = "0.0.0.0";
+  });
   const branding = {
     productName: "Nuxt DevTools",
     tagline: "DevTools for Nuxt",
@@ -3529,9 +3561,10 @@
   if (isGreaterOrEqual(version$1, "8.3.0")) {
     extendViteDevToolsConfig((devtools) => {
       devtools.branding ??= branding;
+      if (lanAllowedOrigins.length) devtools.allowedOrigins = lanAllowedOrigins;
     });
   } else {
-    const DevTools = await import('@vitejs/devtools').then((r) => r.DevTools({ branding }));
+    const DevTools = await import('@vitejs/devtools').then((r) => r.DevTools({ branding, allowedOrigins: lanAllowedOrigins }));
     addVitePlugin(DevTools);
   }
   let connectDevToolsKit;
Ngôn ngữ chính
TypeScript
Star
3.3k
Fork
218
Merge trung bình
1 ngày 4 giờ
Pull request đã merge (30 ngày)
21

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nuxt/devtools

Tất cả issue của nuxt/devtools

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.