本地运行的前端代码,如何让他人访问
有时候,我前端写好了项目,想要给其他人看一下效果,可以选择将代码部署到test环境,也可以选择让外部通过ip来访问,不过前提是在同一个局域网下(比如连接同一个WiFi),下面介绍第二种方式。
修改dev命令
首先我们需要先修改host地址,此处以vue3项目举例
页面启动之后如下
正常情况下,script
下的dev命令是不会指定host的,我们可以在下面看到Local
的地址为默认的127.0.0.1
,此时把这个网址发给别人肯定跑不起来。
所以我们可以指定host,比如0.0.0.0
,允许所有ip访问
"dev": "vite --host=0.0.0.0",
修改完host后,windows系统的话,我们还需要关闭防火墙(苹果不需要)。重新启动项目可以看到
Network那里的网址,打马赛克的地方其实就是本机的ip地址,window输入cmd
打开命令提示符,然后输入ipconfig
即可查到ip地址,苹果的话,点击wifi小图标,同时按住option
键即可查到ip地址。
在其他电脑或者手机访问
浏览器中输入url即可看到相关页面,此方法也适用于手机端调试
作者:笨笨狗吞噬者
来源:juejin.cn/post/7218916720323706935
来源:juejin.cn/post/7218916720323706935