站长

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

有时候，我前端写好了项目，想要给其他人看一下效果，可以选择将代码部署到test环境，也可以选择让外部通过ip来访问，不过前提是在同一个局域网下（比如连接同一个WiFi），下面介绍第二种方式。修改dev命令首先我们需要先修改host地址，此处以vue3项目举例页面启动之后如下正常情况下，下的dev命令是不会指定host的，我们可以在下面看到的地址为默认的,此时把这个网址发给别人肯定跑不起来。所以我们