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

问题描述 投票:0回答:4

这可能是一个愚蠢的问题,因为它看起来很简单,但我无法让我的 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 地址上运行?
我真的很想知道如何完成这件事,这真的让我很困惑。

vue.js npm nuxt.js yarnpkg
4个回答
5
投票
我知道你很久以前就问过这个问题,但从未得到答案。这是目前 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


0
投票
如果您想在

public IP

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

如果您想在

private IP

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


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

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

PORT=8000 npm run dev
或两者

HOST=0 PORT=8000 npm run dev
    

0
投票
在 Nuxt 3 中,在项目的根目录中创建一个 .env 文件并添加以下变量:

NUXT_HOST=0.0.0.0 NUXT_PORT=3000
当您启动服务器时,Nuxt 将自动从 .env 读取并应用这些设置。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.