Flutter we361e4d0664e1012b92fc66b548a2d88c 打包部署到 免費的前端網頁托管平臺 一、打包步驟

1、flutter 版本需要 2.0 以上，2024 年了大家估計都已經是用 3.0 及以上版本了吧

a4889d6d8cdccb6f9e4a3225b63ode class="prism language-dart">Flutter 3.10.6 ? channel stable ? https://github.com/flutter/flutter.git
Framework ? revision f468f3366c (9 months ago) ? 2023-07-12 15:19:05 -0700
Engine ? revision cdbeda788a
Tools ? Dart 3.0.6 ? DevTools 2.23.1

2、如果項目的根目錄沒有 web 文件夾，創建一個一個文件夾支持 web 開發

flutter create .

3、使用如下三種方式構建 web 項目

//建議打包之前執行下 flutter clean
flutter clean

//1、使用HTML渲染器打包，該渲染器提供的打開速度最快，并且具有良好的瀏覽器兼容性（例如IE, Chrome, Safari等）
flutter build web --web-renderer html

//2、使用默認設置進行打包，提供的打開速度為一般，但依然保持良好的瀏覽器兼容性
flutter build web
//3、使用CanvasKit渲染器進行打包，雖然打開速度是最慢的，但依然具有良好的瀏覽器兼容性
flutter build web --web-renderer canvaskit

二、遇到的問題及對應的解決方式

1、直接運行，頁面空白、Flutter Web的行為和傳統的前端web開發不一樣，不支持直接點擊index.html文件進行訪問。

需要部署到一個服務器容器中,例如tomcat

2、如果你沒有服務器，可以開通一個 的云服務，選擇阿里云有免費服務空間。創建一個服務空間，選擇前端靜態網頁托管

新建一個文件夾，將打包成功的/build/web目錄下的所有文件和文件夾都上傳到你在前端網頁托管 新建的文件夾里面

上傳成功之后的頁面如下：

在前端網頁托管-參數配置中有個默認域名,你在你的默認域名后面+"/index.html"就可以訪問你的 flutter web應用了，但是當你敲下回車后會發現頁面依然是空白的。

解決方式1

修改index.html中的<base href="/">為<base href="">

<base href="">

解決方式2

將<base href="/">修改為你的云服務器路徑

<base href="static-mp-c60babca-4df2-48ba-8733-29e020444a83.next.bspapp.com/article-manage/">

修改完成后重新上傳這個文件到對應云服務目錄，再次訪問 域名/+文件夾名稱/+index.html就可以正常訪問 flutter 開發的 web 頁面了，

內容也會加載顯示正常。

例如：xxxxx/article-manage/index.html