建構和釋出為 Web 應用

（例如）在典型的開發過程中，你可以在命令列使用 flutter run -d chrome 命令測試應用程式。這會構建出 debug 版本的應用。

本頁面會幫助你建構 release 版本的應用，其囊括瞭如下主題：

• 處理 Web 中的圖片

• 選擇 Web 渲染器

• 壓縮

• 建構用於釋出的應用

• 釋出到 Web 上

處理 Web 中的圖片

Web 支援標準的 Image widget 來顯示圖片。但是，由於 Web 瀏覽器需要安全地執行不受信任的程式碼，因此與移動和桌面平台相比，影象處理方面存在某些限制。

更多資訊，請參閱 在 Web 中展示圖片.

選擇 Web 渲染器

預設情況下，flutter build 和 flutter run 命令對 Web 渲染器使用 auto 引數。這意味著您的應用程式在移動瀏覽器上會與 HTML 渲染器一起執行，而在桌面瀏覽器上與 CanvasKit 一起執行。這是我們推薦的組合方式，能夠針對每個平台特性最佳化。

更多資訊，請參閱 Web 渲染器.

混淆並壓縮程式碼

當你建立了一個 release 版本時，便已經壓縮了程式碼。

Debug 模式建構的 Web 應用沒有被壓縮，且 Tree-shaking 沒有執行。

Profile 模式建構的 Web 應用沒有被壓縮，但 Tree-shaking 執行了。

Release 模式建構的 Web 應用被壓縮了，並且 Tree-shaking 執行了。

建構用於釋出的應用

使用 flutter build web 命令建構應用程式以進行部署。你也可以透過使用 --web-renderer 自行選擇渲染方式。（請檢視 網頁渲染器）這將產生包括資源的應用程式，並將檔案放入專案的 /build/web 目錄中。

一般的應用程式的 release 版本具有以下結構：

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
    packages
      cupertino_icons
        assets
          CupertinoIcons.ttf
    shaders
      ink_sparkle.frag
  canvaskit
    canvaskit.js
    canvaskit.wasm
    profiling
      canvaskit.js
      canvaskit.wasm
  favicon.png
  flutter.js
  flutter_service_worker.js
  index.html
  main.dart.js
  manifest.json
  version.json

啟動 Web 伺服器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然後開啟 /build/web 目錄。在瀏覽器中存取 localhost:8000（前文用 Python 啟動的伺服器）以檢視應用程式的 release 版本。

將 Flutter 應用內嵌到一個 HTML 頁面裡

你可以使用 iframe 標籤將 Flutter web 應用內嵌到一個網頁裡。請參照下面的例子，將 URL 替換成實際的地址：

<iframe src="URL"></iframe>

部署到 Web 端

等你準備好部署應用時，將 release 包上傳到 Firebase、雲或者是類似服務上：

• Firebase Hosting
• GitHub Pages
• Google Cloud Hosting

PWA Support

從 1.20 版開始，用於 Web 應用程式的 Flutter 範本包括了對可安裝且具有離線功能的 PWA 應用程式所需的核心功能的支援。基於 Flutter 的 PWA 的安裝方式與其他基於 Web 的 PWA 基本相同；由 manifest.json 提供的配置資訊可以宣告您的 Flutter 應用程式是 PWA，該檔案可以在 web 目錄中使用 Flutter create 命令產生。

對 PWA 的支援仍在進行中，因此，如果您發現不正確的地方，歡迎 給予我們反饋。