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

Question

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

Nuxt.js 文档说我必须将其放入我的 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

我知道你很久以前就问过这个问题，但从未得到答案。这是目前 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 - 从命令行

如果您只想将其作为一次性命令运行以简单测试某些内容，那么您可以在运行

HOST=0

 命令之前在命令行中指定 

npm run dev

。

它看起来像这样：

HOST=0 PORT=8000 npm run dev 选项 #3 - 创建用于托管开发服务器的脚本

如果您经常在本地主机测试和内部网络测试之间切换，则此选项非常有用。它允许您创建一个新的 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

 命令的工作方式与以前相同（使用本地主机）。

---

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

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

Answer 2

如果您想在

public IP

 中运行应用程序，您需要像 digitalocean、vultr 这样的主机。

如果您想在

private IP

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

Answer 3

您可以在 nuxt.config.js 文件中修改此内容，但不建议这样做，因为这可能会导致您在托管站点时出现问题。直接在dev命令中修改host会好很多。像这样

HOST=0 npm run dev 或您想要的端口

PORT=8000 npm run dev 或两者

HOST=0 PORT=8000 npm run dev

Answer 4

在 Nuxt 3 中，在项目的根目录中创建一个 .env 文件并添加以下变量：

NUXT_HOST=0.0.0.0
NUXT_PORT=3000

当您启动服务器时，Nuxt 将自动从 .env 读取并应用这些设置。

如果服务器已在运行，请确保重新启动服务器。

您的 Nuxt 应用程序应该可以通过网络 http://:3000 访问。