<div itemprop="articleBody" data-v-2c6459d4="" style="font-weight: 400;"><h1 data-id="heading-0">本文简介</h1>
<p><strong>点赞 + 关注 + 收藏 = 学会了</strong></p>
<p>今天介绍一个超哇的工具：<code>Localtunnel</code></p>
<p><code>Localtunnel</code> 是一个基于 <code>Node.js</code> 的内网穿透工具，它允许开发者将本地开发环境暴露给互联网，然后你的亲戚朋友就可以访问它了。</p>
<p><code>Localtunnel</code> 的应用场景：</p>
<ul>
<li><strong>开发调试</strong>：你可以在本地环境运行 <code>Web</code> 服务，然后通过 <code>Localtunnel</code> 将其暴露到公网，其他人就可以远程查阅或调试。如果你的 <code>Web</code> 项目是运行在移动端，也可以通过 <code>Localtunnel</code> 将其暴露出来，然后在手机上访问。</li>
<li><strong>展示作品</strong>：要向外部展示你的作品时也可以使用 <code>Localtunnel</code> 将其暴露出来，尤其适合那种临时展示的场景，展示完就关掉服务，别人就不能再访问了。也很适合面试时需要展示作品，但又没钱买域名服务器。或者有些纯前端的工友在远程面试时需要展示作品就可以让 <code>Localtunnel</code> 帮个忙。</li>
</ul>
<h1 data-id="heading-1">动手操作</h1>
<p>先说说如何使用。</p>
<p>我随便找个项目演示。我使用 <code>Vite</code> 创建了一个 <code>Svelte</code> 项目。</p>
<pre><code lang="bash"><span data-line-num="1">npm create vite@latest svelte-demo</span>
<span data-line-num="2"></span>
<span data-line-num="3"><span>cd</span> svelte-demo</span>
<span data-line-num="4">npm install</span>
</code></pre>
<p>之后可以执行 <code>npm run dev</code> 运行项目。</p>
<p>也可以打包后再运行。</p>
<pre><code lang="bash"><span data-line-num="1">npm run build</span>
<span data-line-num="2">npm run preview</span>
</code></pre>
<p>我是打包后再运行项目的，运行完 <code>npm run preview</code> 后给回一个地址我，<code>http://localhost:4173/</code></p>
<p>这里的端口是 <code>4173</code>，记住这个端口号。</p>
<p>然后执行 <code>Localtunnel</code> 提供的命令把你本机的这个端口暴露到公网。</p>
<pre><code lang="bash"><span data-line-num="1">npx localtunnel --port 端口号</span>
</code></pre>
<p>我前面得到的端口号是 <code>4173</code> ，所以就执行下面这条命令</p>
<pre><code lang="bash"><span data-line-num="1">npx localtunnel --port 4173</span>
</code></pre>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b22a2d662bd842ce8a591f30bd2e9e3b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1212&h=814&s=216588&e=png&a=1&b=fdfdfd" alt="01.png" loading="lazy"></p>
<p>执行完这条命令会返回一个地址给你，这个网址是动态分配的。在浏览器打开这个地址。</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/544e3a2d5e0c4cdcab9483eca22231e6~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1810&h=1756&s=332885&e=png&a=1&b=7f7f7f" alt="02.png" loading="lazy"></p>
<p>此时需要你输入一个密码，这个密码就是你的IP地址。</p>
<p>如果你不知道你的IP地址是多少，可以继续往下拉，看到 <a href="https://link.juejin.cn/?target=https%3A%2F%2Floca.lt%2Fmytunnelpassword" target="_blank" title="https://loca.lt/mytunnelpassword" ref="nofollow noopener noreferrer">loca.lt/mytunnelpas…</a> ，然后点进去就能查看到你的IP地址。</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/153a79eb81624e9095ba9437540a86db~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1682&h=1494&s=334563&e=png&a=1&b=7f7f7f" alt="03.png" loading="lazy"></p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a493947fb86640e2987200fcba9fc328~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1260&h=376&s=57756&e=png&a=1&b=fefefe" alt="04.png" loading="lazy"></p>
<p>把你的IP地址复制到“Tunnel Password”输入框，然后点击“Click to Submit”按钮，等个几秒钟就能在公网访问你的网站了。</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b14e245679514cd4a53fae04f414e66b~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1496&h=532&s=84938&e=png&a=1&b=ffffff" alt="05.png" loading="lazy" class="reader-image-tiny"></p>
<p>但是，如果别人（或者别的设备）想访问你的网站，你需要把你的网址和你的IP给到别人。建议不要把你的IP随便发给陌生人。或者你可以使用手机开个热点，用蜂窝网络的IP。</p>
<p>前面是通过 <code>npx</code> 去执行 <code>Localtunnel</code> 的命令，如果你需要经常使用 <code>Localtunnel</code> 也可以全局安装它。</p>
<p>全局安装的命令：</p>
<pre><code lang="bash"><span data-line-num="1">npm install -g localtunnel</span>
</code></pre>
<p>全局安装 <code>Localtunnel</code> 后，只需使用 <code>lt</code> 命令启动隧道即可。</p>
<pre><code lang="bash"><span data-line-num="1">lt --port 端口号</span>
</code></pre>
<p>更多 <code>Localtunnel</code> 的配置可以查阅<a href="https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Flocaltunnel%2Flocaltunnel" target="_blank" title="https://github.com/localtunnel/localtunnel" ref="nofollow noopener noreferrer">官方文档</a>。</p>