Flutter Web 打包指南
// 如果你的Flutter版本低於2.0,請先升級Flutter版本 // 創建一個web文件夾來存放web相關的資源 flutter create . // 使用HTML渲染器打包,該渲染器提供的打開速度最快,並且具有良好的瀏覽器兼容性(例如IE, Chrome, Safari等) flutter build web --web-renderer html // 使用默認設置進行打包,提供的打開速度為一般,但依然保持良好的瀏覽器兼容性 flutter build web // 使用CanvasKit渲染器進行打包,雖然打開速度是最慢的,但依然具有良好的瀏覽器兼容性 flutter build web --web-renderer canvaskit
常見問題及解決方法
// 問題1: 打開index.html時,頁面顯示為空白 // 這是一個正常現象。Flutter Web的行為不同於傳統的前端web開發,它不支持直接點擊index.html文件進行訪問。 // 你必須將其部署到一個服務器容器中,例如tomcat。 // 問題2: 盡管已經部署到tomcat,但通過瀏覽器打開仍然是空白頁面 // 這通常是因為文件路徑引用不正確所致。有兩種解決方法: // 方法1: 修改index.html中的<base href="/">為<base href=""> 用編輯器打開index.html,能看到源文件,把<base href="/">,改成<base href=""> // 方法2: 將<base href="/">修改為你的服務器路徑 // 例如:<base href="http://192.168.1.80:3350/web/"> 用編輯器打開index.html,能看到源文件,把<base href="/">,改成<base href="http://192.168.1.80:3350/web/">
