npm run dev 生成network网址无法被同局域网下的其他主机访问
warning:
这篇文章距离上次修改已过433天,其中的内容可能已经有所变动。
报错问题解释:
当你执行npm run dev启动本地开发服务器时,通常会在本机生成一个用于开发的网络地址,比如http://localhost:3000或http://127.0.0.1:3000。这个地址是只能被本机访问的,不能被同一局域网下的其他主机访问。localhost和127.0.0.1是特殊的IP地址,用于本机环回测试,不能被外部设备访问。
问题解决方法:
- 修改开发服务器的监听地址:你可以修改开发服务器的配置,让它监听局域网内可访问的IP地址,如你的本机IP(通常是
192.168.x.x或10.x.x.x等)。 - 使用外部网络地址:如果你的设备通过路由器连接到互联网,你可以找到路由器分配给你的公网IP,然后将开发服务器配置为监听这个IP。
- 使用端口转发:通过路由器设置端口转发,将外网端口转发到你的内网IP和端口。
- 使用工具如ngrok或localtunnel:这些工具可以提供一个公网可访问的地址,指向你的本地开发服务器。
具体步骤取决于你使用的开发工具和框架。以下是一些常见框架的修改方法:
- 对于Vue.js,可以在
vue.config.js中设置devServer.host为局域网IP。 - 对于Create React App,可以在
package.json中添加或修改scripts,例如"start": "SET HOST=0.0.0.0 && react-scripts start"。 - 对于Ruby on Rails,可以在
config/environments/development.rb中设置config.host为局域网IP。
确保你的防火墙和路由器设置允许相应端口的通信。如果你选择使用工具,请遵循相关工具的文档指引。
评论已关闭