为什么捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
将项目转换为使用 Vite 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Vite
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试与审计
开发移动应用
Ajax 请求
将开发服务器开放到公网
使用 Vite 的 Quasar CLI - @quasar/app-vite
向公众开放开发服务器

在某些时候,您可能希望向其他人展示您正在开发的项目。幸运的是,有一些不错的工具可以实现这一点,例如 localhost.runNgrok。它们都创建了一个到您的开发服务器的隧道,并且(默认情况下)在其各自的服务器上自动生成一个互联网地址,供您的客户或您想展示作品的任何人使用。

警告

向公众开放您的开发服务器会带来安全风险。使用此类工具时务必谨慎。

完成演示或测试后,请确保停止 localhost.run 或 ngrok。这将防止任何人通过它们访问您的计算机。

使用 Tunnelmole

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

首先,全局安装 tunnelmole


$ yarn global add tunnelmole

然后,假设您在端口 80 上运行 quasar,请运行以下命令

$ tmole 80

如果您的端口与 80 不同,请将 80 更改为您的端口。

以下是带有输出的完整命令

$ 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 替换为您的端口)。

$ tmole 80 as mysubdomain.tunnelmole.com

如果将 tunnelmole 作为依赖项添加到您的项目中,也可以从代码中启动它(yarn add --dev tunnelmolenpm i --save-dev tunnelmole 或 pnpm/bun 等效命令)。

首先导入 tunnelmole。ES 和 CommonJS 模块都受支持。

将 tunnelmole 作为 ES 模块导入

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

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

导入模块后,您可以使用以下代码启动 tunnelmole,如果您的应用程序监听的端口与 80 不同,请将端口 80 更改为该端口。

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

  1. 假设您有一个 SSH shell,您只需要发出以下命令(替换您的详细信息)
$ 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
  1. 就是这样,您现在将拥有一个基于您当前系统用户名分配给您的随机子域,如下所示
$ 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.

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

使用 Ngrok

  1. 下载并安装 ngrok 此处。(请注意,ngrok 可执行文件不需要放置在 Cordova 文件夹内或从其内部运行。在 Mac 上,最好将 ngrok 可执行文件放在 /usr/local/bin 中,以便能够全局运行它。)

  2. 启动开发服务器

$ quasar dev
  1. 创建您的 ngrok 连接
$ ngrok http 8080
# In case your development server doesn't run on port 8080 you need to change the number to the correct port
  1. ngrok 在启动时会在命令行中显示 URL。
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 将对任何人可见,直到此连接再次关闭。

检查流量

运行 ngrok 时,访问 http://localhost:4040 以检查流量。

此工具允许使用自定义域名、密码保护等等。如果您需要进一步的帮助,请参阅 ngrok 文档 以获取更多信息。