為何捐款
API 瀏覽器
升級指南
新!
quasar.config 檔案
將專案轉換為搭配 Vite 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
懶加載 - 代碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Vite
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter
測試與稽核
開發行動應用程式
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 模組。

以 ES 模組匯入 tunnelmole

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

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

模組匯入後,您可以使用以下程式碼啟動 tunnelmole,如果您的應用程式監聽的連接埠與連接埠 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 here。(請注意,ngrok 可執行檔不需要放置在 cordova 資料夾內或從 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 時,請造訪 https://127.0.0.1:4040 以檢查流量。

此工具允許自訂網域、密碼保護以及更多功能。如果您需要進一步協助,請參閱 ngrok 文件 以取得更多資訊。