flutter Web打包

举报
坚果的博客 发表于 2021/12/16 00:15:37 2021/12/16
【摘要】 1. 创建web文件夹 输入下面的命令创建web文件 flutter create . 1 然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图 2. 打...

1. 创建web文件夹

输入下面的命令创建web文件

flutter create .

  
 
  • 1

然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图

image-20210927103240783

2. 打包web版本

我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来;同样的道理要给浏览器用,也需要打包web相关代码.

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

这将生成包括资源的应用程序,并将文件放入项目的 /build/web 目录中。

一般的应用程序的 release 版本具有以下结构:

content_copy

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

启动 Web 服务器(例如,python -m SimpleHTTPServer 8000,或使用 dhttpd package),然后打开 /build/web 目录。在浏览器中访问 localhost:8000(前文用 Python 启动的服务器)以查看应用程序的 release 版本。

经过测试,上面三种方式都可以打包web版本, 其中第一种是针对移动端的打包方式, 第二种是一般的打包方式, 第三种是针对pc端的打包方式.

那这3种方式打包出来,运行起来有什么不同呢

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

image-20210927103940311

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

image-20210927104021552

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

3结论

就是使用第一种打包方式会比较好

flutter build web --web-renderer html

  
 
  • 1
坑1: 找到了index.html,用浏览器打开一片空白

这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等

坑2: 已经用nginx代理,用浏览器打开还是一片空白

那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把,改成

方法2:
用编辑器打开index.html,能看到源文件,把,改成你服务器的路径比喻说:

然后nginx代理

  #flutter
    server {
       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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

撒花

文章来源: jianguo.blog.csdn.net,作者:坚果前端の博客,版权归原作者所有,如需转载,请联系作者。

原文链接:jianguo.blog.csdn.net/article/details/120526794

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200