1. 創(chuàng)建web文件夾

輸入下面的命令創(chuàng)建web文件

flutter create .

然后就會創(chuàng)建一系列web相關(guān)的文件 ,如下圖, 目錄結(jié)構(gòu)也會多一個web的文件夾. 如下圖

2. 打包web版本

我們知道要給android手機用,需要打包apk出來, 要給iPhone手機用,需要打包ipa出來;同樣的道理要給瀏覽器用,也需要打包web相關(guān)代碼.

flutter build web --web-renderer htmlflutter build web flutter build web --web-renderer canvaskit

這將生成包括資源的應用程序，并將文件放入項目的 /build/web 目錄中。

一般的應用程序的 release 版本具有以下結(jié)構(gòu)：

content_copy

/build/webassetsAssetManifest.jsonFontManifest.jsonNOTICESfontsMaterialIcons-Regular.ttf<other font files><image files>index.htmlmain.dart.jsmain.dart.js.map

啟動 Web 服務器（例如，python -m SimpleHTTPServer 8000，或使用 dhttpd package），然后打開 /build/web 目錄。在瀏覽器中訪問 localhost:8000（前文用 Python 啟動的服務器）以查看應用程序的 release 版本。

經(jīng)過測試,上面三種方式都可以打包web版本, 其中第一種是針對移動端的打包方式, 第二種是一般的打包方式, 第三種是針對pc端的打包方式.

那這3種方式打包出來,運行起來有什么不同呢

flutter build web --web-renderer html 打開速度最快,兼容性好(是指ie,chrome,safari等瀏覽器兼容)

flutter build web 打開速度一般,兼容性好

flutter build web --web-renderer canvaskit 打開速度最慢,兼容性好

3結(jié)論

就是使用第一種打包方式會比較好

flutter build web --web-renderer html

坑1: 找到了index.html,用瀏覽器打開一片空白

這個屬于正常的, 這個不像前端web ,html css js那套,點擊index.html就能訪問的. 在flutter里面是不能直接訪問的,一定要放到容器里面去才能訪問,如:tomcat等

坑2: 已經(jīng)用nginx代理,用瀏覽器打開還是一片空白

那是因為文件路徑引用不對.解決辦法有2種
方法1:
用編輯器打開index.html,能看到源文件,把,改成

方法2:
用編輯器打開index.html,能看到源文件,把,改成你服務器的路徑比喻說:

然后nginx代理

#flutterserver {listen 251 ;server_name flutterblog;location / {root /root/study/flutter/web/;index index.html index.htm;# proxy_pass http://127.0.0.1:12345;# access_log /usr/local/nginx/logs/go.101.log ;}} ?```undefined

撒花

總結(jié)

以上是生活随笔為你收集整理的flutter Web打包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。