Nuxtjs：将本地主机暴露给外部不起作用

Question

我尝试将我的手机连接到我本地的 nuxtjs 项目。我认为它会像那里描述的那样容易。https://nuxtjs.org/faq/host-port/但没有任何效果。我也安装了 cross-env 但没有解决我的问题。

如果我在我的电脑上启动 npm run dev

"dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",

服务器启动，我可以使用 url 连接到项目

但是如果我尝试连接我的手机，它就无法加载。我的手机和电脑连接到同一个wifi。

如果可能存在问题，我试图找出 url 中设置的 ip nuxtjs。我使用了 ipconfig，在第一个条目中我找到了 ip，但还有很多其他的，我不知道它们是什么......

我还查看了 wifi 的设置，但在那里我发现了一个不同的 IP 地址

这是问题吗？我试图在 NUXT_HOST 中设置此 ip，但随后我只收到此错误消息

listen EADDRNOTAVAIL ip-address

有任何想法吗？啊，如果这有所作为，我正在使用 Windows 10。

解决方案

在移动设备上，需要来自 wifi 的 IP + 在 nuxt.config 中设置的端口，而不是在控制台中输出的 IP

Answer 1

我希望我能正确理解你的问题。

如果您要求一种允许 Nuxt 开发服务器允许来自（外部）主机和 localhost 以外的 IP 地址的连接的方法，可以通过如下修改轻松完成nuxt.config.js：

    build: {
        extend(config, ctx) {} // blah blah
    },
    server: {
        host: "0.0.0.0"
    }

我使用它通过本地网络通过 Wi-Fi 从我的手机连接到 Nuxt。

Answer 2

有几种方法可以做到这一点。这是官方文档。

例如：

"scripts": {
  "dev": "HOST=0.0.0.0 PORT=3333 nuxt"
}

或直接命令： nuxt --hostname myhost --port 3333

ETC。

Answer 3

为了在我的本地网络上共享我的 Nuxt 开发网站（以在手机和平​​板电脑等其他设备上进行调试），我执行了以下操作。

1.

npm install --save-dev cross-env

2.

我将 package.json 中的“dev”命令更改为

"dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",

3.

我跑了npm run dev，得到以下

4.

我访问了其他设备上控制台中给我的地址。工作得很好。