Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
Flutter we361e4d0664e1012b92fc66b548a2d88c 打包部署到 免費(fèi)的前端網(wǎng)頁托管平臺(tái) 一、打包步驟
1、flutter 版本需要 2.0 以上,2024 年了大家估計(jì)都已經(jīng)是用 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、如果項(xiàng)目的根目錄沒有 web 文件夾,創(chuàng)建一個(gè)一個(gè)文件夾支持 web 開發(fā)
flutter create .
3、使用如下三種方式構(gòu)建 web 項(xiàng)目
//建議打包之前執(zhí)行下 flutter clean
flutter clean
//1、使用HTML渲染器打包,該渲染器提供的打開速度最快,并且具有良好的瀏覽器兼容性(例如IE, Chrome, Safari等)
flutter build web --web-renderer html

//2、使用默認(rèn)設(shè)置進(jìn)行打包,提供的打開速度為一般,但依然保持良好的瀏覽器兼容性
flutter build web
//3、使用CanvasKit渲染器進(jìn)行打包,雖然打開速度是最慢的,但依然具有良好的瀏覽器兼容性
flutter build web --web-renderer canvaskit
二、遇到的問題及對(duì)應(yīng)的解決方式
1、直接運(yùn)行,頁面空白、Flutter Web的行為和傳統(tǒng)的前端web開發(fā)不一樣,不支持直接點(diǎn)擊index.html文件進(jìn)行訪問。
需要部署到一個(gè)服務(wù)器容器中,例如tomcat
2、如果你沒有服務(wù)器,可以開通一個(gè) 的云服務(wù),選擇阿里云有免費(fèi)服務(wù)空間。創(chuàng)建一個(gè)服務(wù)空間,選擇前端靜態(tài)網(wǎng)頁托管
新建一個(gè)文件夾,將打包成功的/build/web目錄下的所有文件和文件夾都上傳到你在前端網(wǎng)頁托管 新建的文件夾里面
上傳成功之后的頁面如下:
在前端網(wǎng)頁托管-參數(shù)配置中有個(gè)默認(rèn)域名,你在你的默認(rèn)域名后面+"/index.html"就可以訪問你的 flutter web應(yīng)用了,但是當(dāng)你敲下回車后會(huì)發(fā)現(xiàn)頁面依然是空白的。
解決方式1
修改index.html中的<base href="/">為<base href="">
<base href="">
解決方式2
將<base href="/">修改為你的云服務(wù)器路徑
<base href="static-mp-c60babca-4df2-48ba-8733-29e020444a83.next.bspapp.com/article-manage/">
修改完成后重新上傳這個(gè)文件到對(duì)應(yīng)云服務(wù)目錄,再次訪問 域名/+文件夾名稱/+index.html就可以正常訪問 flutter 開發(fā)的 web 頁面了,
內(nèi)容也會(huì)加載顯示正常。
例如:xxxxx/article-manage/index.html
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。