在某些时候，你可能想向其他人展示你正在进行的项目。幸运的是，有几个不错的工具可以实现这一点，localhost.run 和 Ngrok。两者都会创建一条通往你开发服务器的隧道，并（默认情况下）在各自的服务器上自动生成一个互联网地址，以便提供给你的客户或任何你想向其展示作品的特殊人员。

¥At some point you may want to show someone else the project you’ve been working on. Fortunately, there are a couple of good tools to accomplish this, localhost.run and Ngrok. Both create a tunnel to your dev server and (by default) auto-generate an internet address on their respective servers to offer to your clients or anyone special you’d like to show your work to.

使用 Tunnelmole(Using Tunnelmole)

¥Using Tunnelmole

Tunnelmole 可以在安装了 NodeJS 16+ 的任何机器上运行，并且没有非 JavaScript 依赖。

¥Tunnelmole will work on any machine with NodeJS 16+ installed and has no non-JavaScript dependencies.

首先，全局安装 tunnelmole 包：

¥First, install tunnelmole package globally:

$ yarn global add tunnelmole

然后，假设你在端口上运行 quasar 80，运行以下命令：

¥Then, assuming you are running quasar on port 80, run the following:

$ tmole 80

如果你的端口与 80 不同，请将 80 更改为你的端口。

¥If your port is different to 80, change 80 to your port.

以下是包含输出的完整命令：

¥Here’s the full command with output:

$ tmole 80
http://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
https://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80

如果你自行托管 Tunnelmole 服务，或者你已为官方服务设置了 API 密钥，则可以运行以下命令使用自定义子域名（同样，如果端口不同，请将 80 替换为你的端口）。

¥If you are self hosting your own Tunnelmole service or you have a set an API key for the official service, you can run the following to use a custom subdomain (again, replace 80 with your port if it is different).

$ tmole 80 as mysubdomain.tunnelmole.com

如果你将 tunnelmole 添加为项目的依赖（yarn add --dev tunnelmole 或 npm i --save-dev tunnelmole 或 pnpm/bun 等价物），也可以从代码中启动它。

¥Its also possible to launch tunnelmole from code if you add it as a dependency to your project (yarn add --dev tunnelmole or npm i --save-dev tunnelmole or pnpm/bun equivalents)

首先导入 tunnelmole。同时支持 ES 和 CommonJS 模块。

¥First import tunnelmole. Both ES and CommonJS modules are supported.

将 tunnelmole 导入为 ES 模块

¥Importing tunnelmole as an ES module

// import as ESM:
import { tunnelmole } from 'tunnelmole'

// or import as CommonJS module:
const tunnelmole = require('tunnelmole/cjs')

导入模块后，你可以使用以下代码启动 tunnelmole，如果端口 80 不同，请将其更改为应用监听的端口。

¥Once the module is imported you can start tunnelmole with the code below, changing port 80 to the port your application listens on if it is different.

const url = await tunnelmole({
  port: 80
  // Optionally, add "domain: 'mysubdomain.tunnelmole.com'" if using a custom subdomain
})
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com

使用 localhost.run(Using localhost.run)

¥Using localhost.run

1. 假设你有一个 SSH shell，你只需发出以下命令（替换你的详细信息）

   ¥Assuming you have an SSH shell, you only need issue the following command (substituting your details)

$ ssh -R 80:localhost:8080 ssh.localhost.run
# In case your development server doesn't run on port 8080 you need to change the number to the correct port

2. 就是这样，现在你将获得一个基于当前系统用户名的随机子域名，如下所示：

   ¥That’s it, and you will now have a random subdomain based on your current system username assigned to you like so:

$ ssh -R 80:localhost:8080 ssh.localhost.run
Connect to http://fakeusername-random4chars.localhost.run or https://fakeusername-random4chars.localhost.run
Press ctrl-c to quit.

目前无法请求你自己的子域名。

¥It’s not currently possible to request your own subdomain.

使用 Ngrok(Using Ngrok)

¥Using Ngrok

1. 下载并安装 ngrok 此处。（请注意，ngrok 可执行文件不需要放在你的 cordova 文件夹中或从其中运行。在 Mac 上，最好将 ngrok 可执行文件放在文件放在 /usr/local/bin 中，以便能够全局运行它。）

   ¥Download and install ngrok here. (Please note that the ngrok executable file does not need to be placed in or run from inside your cordova folder. When on a mac it’s best to place the ngrok executable file inside /usr/local/bin to be able to run it globally.)

2. 启动你的开发服务器

   ¥Start your Dev server

$ quasar dev

3. 创建你的 ngrok 连接

   ¥Create your ngrok connection

$ ngrok http 8080
# In case your development server doesn't run on port 8080 you need to change the number to the correct port

4. ngrok 启动时会在命令行中显示 URL。

   ¥ngrok shows the url in the command line when it started.

Tunnel Status                 online
Version                       2.0/2.0
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://92832de0.ngrok.io -> localhost:8080
Forwarding                    https://92832de0.ngrok.io -> localhost:8080

Connections                  ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

请小心，因为在该连接再次关闭之前，任何人都可以访问 ‘转发’ URL。

¥Please be careful as the ‘Forwarding’ URL will be accessible to anyone until this connection is closed again.

检查流量(Inspecting traffic)

¥Inspecting traffic

运行 ngrok 时，请访问 http://localhost:4040 来检查流量。

¥When running ngrok, visit http://localhost:4040 to inspect the traffic.

此工具支持自定义域名、密码保护等功能。如果你需要进一步的帮助，请参阅 ngrok 文档 了解更多信息。

¥This tool allows for custom domains, password protection and a lot more. If you require further assistance, please refer to the ngrok docs for more information.