建置並發布網頁應用程式

在典型的開發週期中，您會使用命令列的 flutter run -d chrome（例如）來測試應用程式。這會建置應用程式的除錯版本。

本頁面可協助您準備應用程式的發布版本，並涵蓋下列主題：

• 建置應用程式以進行發布
• 部署到網頁
• 部署到 Firebase Hosting
• 在網頁上處理圖片
• 選擇建置模式和渲染器
• 最小化

使用 flutter build web 命令建置應用程式以進行部署。

flutter build web

這會產生應用程式，包括資源，並將檔案放置在專案的 /build/web 目錄中。

若要驗證應用程式的發布版本，請啟動網頁伺服器 (例如，python -m http.server 8000，或使用 dhttpd 套件)，然後開啟 /build/web 目錄。在瀏覽器中導覽至 localhost:8000（使用 python SimpleHTTPServer 範例），以檢視應用程式的發布版本。

您可能需要部署效能分析或除錯版本以進行測試。若要執行此操作，請將 --profile 或 --debug 標記傳遞給 flutter build web 命令。效能分析版本專門用於使用 Chrome DevTools 進行效能分析，而除錯版本可以用來設定 dart2js 以符合斷言，並變更最佳化等級（使用 -O 標記）。

Flutter 網頁提供兩種建置模式（預設和 WebAssembly）和兩種渲染器（canvaskit 和 skwasm）。

如需更多資訊，請參閱 網頁渲染器。

當您準備好部署應用程式時，請將發布套件上傳到 Firebase、雲端或類似的服務。以下是一些可能性，但還有許多其他選擇：

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

您可以使用 Firebase CLI 來建置並使用 Firebase Hosting 發布您的 Flutter 應用程式。

若要開始，請安裝或更新 Firebase CLI

npm install -g firebase-tools

1. 將網頁框架預覽功能啟用至 Firebase 框架感知 CLI

   firebase experiments:enable webframeworks

2. 在空白目錄或現有的 Flutter 專案中，執行初始化命令

   firebase init hosting

3. 當系統詢問您是否要使用網頁框架時，請回答 yes。

4. 如果您在空白目錄中，系統會要求您選擇網頁框架。選擇 Flutter Web。

5. 選擇您的託管來源目錄；這可以是現有的 Flutter 應用程式。

6. 選取託管檔案的區域。

7. 選擇是否使用 GitHub 設定自動建置和部署。

8. 將應用程式部署到 Firebase Hosting

   firebase deploy

   執行此命令會自動執行 flutter build web --release，因此您不必在單獨的步驟中建置應用程式。

若要瞭解更多資訊，請造訪官方的 Firebase Hosting 文件，以了解網頁上的 Flutter。

網頁支援標準的 Image 小工具來顯示圖片。根據設計，網頁瀏覽器會執行不受信任的程式碼，而不會損害主機電腦。與行動和桌面平台相比，這限制了您可以使用圖片執行哪些操作。

如需更多資訊，請參閱 在網頁上顯示圖片。

為了改善應用程式的啟動，編譯器會透過移除未使用的程式碼 (稱為樹狀結構搖晃)，以及將程式碼符號重新命名為較短的字串 (例如，將 AlignmentGeometryTween 重新命名為類似 ab 的字串) 來縮減編譯程式碼的大小。套用這兩個最佳化中的哪一個取決於建置模式

請參閱 嵌入 Flutter 網頁。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-11-21。 檢視來源 或回報問題。