如何在 IP 地址上启动 nuxt 项目

Question

这可能是一个愚蠢的问题，因为它看起来很简单，但我无法让我的 nuxt 项目在我的 IP 地址上运行。

Nuxt.js docs 说我必须把它放在我的 package.json 文件中才能在我的 IP 上启动：

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
}

在许多在线文章中，0.0.0.0 自动绑定到您的 IP 地址，因此您可以使用您的 IP 地址在浏览器中访问项目。每当我运行命令yarn dev 时，它只会在0.0.0.0:8000 上启动项目。这是正常的吗？如果是，我如何让它在我的实际 IP 地址上运行？ 我真的很想知道如何才能完成这项工作，这真的让我很困惑。

Answer 1

如果你想在 public IP 中运行应用程序，你需要一个像 digitalocean、vultr 这样的主机。

如果您想在 private IP 中运行应用程序，那么您需要安装一个 Web 服务器，并且您需要使用您的公共 IP 地址并设置端口转发。但这并不安全。

Answer 2

我知道您很久以前就问过这个问题，但从未得到答案。这是目前 Google 的最高结果，因此对于互联网的未来而言，它值得一个很好的答案。

您的设置看起来（大部分）正确，但它需要在您的 nuxt.config.js 文件中，而不是您的 package.json 中。

有几种方法可以做到这一点：

选项 #1 - 内部 nuxt.config.js:

export default {

    // ... All your other settings are already here

    // You will need to add this:
    server: {
        host: '0',
        port: '3000' // optional
    }
}

这将在您的本地网络上公开您的应用。现在，当您运行npm run dev 时，它将在您计算机的 IP 地址上运行。控制台中的输出将链接到您计算机的 IP 地址，后跟端口号。它将不再使用“localhost”。

选项 #2 - 从命令行

如果您只想将其作为一次性命令运行以简要测试某些内容，则可以在运行npm run dev 命令之前在命令行中指定HOST=0。

看起来像这样：

HOST=0 PORT=8000 npm run dev

选项 #3 - 创建用于托管开发服务器的脚本

如果您经常在 localhost 测试和内部网络测试之间切换，此选项非常有用。它允许您创建一个新的 NPM 脚本，以便您可以在要在本地运行时简单地运行 npm run dev，如果要在内部托管，则可以运行 npm run dev:host。

这需要向package.json添加脚本

/*
 * package.json
 */
{
    ... other options

    "scripts": {
        "dev:host": "nuxt --hostname '0' --port 8000"
    }
}

您可以更改脚本的名称（表示"dev:host" 的部分是您想要调用的任何名称。在此示例中，虽然您将在控制台中运行npm run dev:host 以在网络上运行它。但是npm run dev 命令的工作方式与以前相同（使用 localhost）。

---

如果您想在移动设备上打开开发中的应用进行测试，所有这些都非常有用。您的移动设备需要与您的计算机在同一个 wifi 网络上才能访问该页面。只需在您的其他设备上打开 Web 浏览器，输入带有端口号的 IP 地址，它将连接到您的开发服务器。这不会公开您的应用程序，它只会在您的网络内部公开它。这是为测试而设计的，仅此而已。

在文档中阅读更多内容：https://nuxtjs.org/docs/2.x/features/configuration#edit-host-and-port