使用 Flutter 建置 Web 應用程式

本頁概述如何使用 Flutter 設定、執行和建置 Web 應用程式。

在使用 Flutter 建置 Web 應用程式之前，請確保您已安裝 Flutter SDK 和 Web 瀏覽器。有關詳細資訊，請參閱設定 Flutter 的 Web 開發指示。

若要設定您的專案，您可以建立新的 Flutter 專案或為現有專案新增 Web 支援。

若要建立包含 Web 支援的新應用程式，請執行以下命令

flutter create my_app

如果您已經有一個專案，請在您的專案目錄中執行 flutter create 命令

flutter create . --platforms web

這會建立一個 web/ 目錄，其中包含用於引導和執行 Flutter 應用程式的 Web 資產。

選取 Chrome 作為您應用程式的目標裝置，以執行和偵錯 Flutter Web 應用程式

flutter run -d chrome

您也可以在 IDE 中選擇 Chrome 作為目標裝置。

如果您願意，您可以在 Windows 上使用 edge 裝置類型，或者使用 web-server 在您選擇的瀏覽器中導覽至本機 URL。

您可以傳遞 --wasm 標記，以使用 WebAssembly 執行您的應用程式

flutter run -d chrome --wasm

Flutter Web 提供多種建置模式和渲染器。有關詳細資訊，請參閱 Web 渲染器。

執行以下命令以產生發行版本

flutter build web

您也可以傳遞 --wasm 標記，以使用 WebAssembly 建置您的應用程式

flutter build web --wasm

這會使用建置檔案（包括 assets 目錄）填入 build/web 目錄，這些檔案需要一起提供服務。

若要深入了解如何將這些資產部署到 Web，請參閱建置和發布 Web 應用程式。如需其他常見問題的解答，請參閱 Web 常見問題。

使用 Flutter DevTools 進行以下工作

使用 Widget 測試或整合測試。若要深入了解如何在瀏覽器中執行整合測試，請參閱整合測試頁面。

除非另有說明，本網站上的文件均反映 Flutter 的最新穩定版本。本頁最後更新於 2024-11-12。檢視原始碼或回報問題。

需求