解决Network: use --host to expose
当在本地开发环境中运行项目时只允许本机通过此地址在浏览器中预览或调试项目,别人是不能通过localhost来访问项目。项目在局域网络环境中运行的地址,对应项目运行电脑的ip或者域名。在局域网中,别人可以通过ip地址和端口号来访问项目;项目部署在服务器上,别人可以使用服务器ip或者域名来访问项目。导致同一局域网中的其他人想要通过ip和端口号访问本地的项目不是很方便(除了命令提示符窗口通过ipconf
问题:在使用Vite创建vue3+ts项目的时候,启动项目发现提示:Network: use --host to expose,如下图:

导致同一局域网中的其他人想要通过ip和端口号访问本地的项目不是很方便(除了命令提示符窗口通过ipconfig获取ip告知对方)。
原因:Vite在默认情况下,为了安全起见,只会监听localhost上的请求,项目中ip没有进行配置,导致服务没有暴露给外部网络。
处理方法1:终端中输入npx vite --host 0.0.0.0,如下图:

但是当你终止服务重新启动的时候又出现提示,不太建议。
处理方法2:终端中通过npm run dev -- --host来启动项目,通过--host参数来指定Vite开发服务器监听所有网络接口,如下图:

处理方法3:在package.json文件中配置scripts中的dev,后面值加上--host即可,如下图:

处理方法4:在vite.config.js文件中defineConfig中添加
server: {
host: '0.0.0.0'
},
如下图:

成功解决问题。
【多说一句】
Local地址和Network地址:
- Local地址
项目在本地开发环境中运行的地址,对应localhost或127.0.0.1。当在本地开发环境中运行项目时只允许本机通过此地址在浏览器中预览或调试项目,别人是不能通过localhost来访问项目。
- Network地址
项目在局域网络环境中运行的地址,对应项目运行电脑的ip或者域名。在局域网中,别人可以通过ip地址和端口号来访问项目;项目部署在服务器上,别人可以使用服务器ip或者域名来访问项目。
【PS:若有其它更好的方法,请您大声说出来,欢迎大家一起探讨】
更多推荐


所有评论(0)