flutter Web打包_flutter web 打包-程序员宅基地

技术标签： 爬虫  flutter  nginx  

1. 创建web文件夹

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

flutter create .

然后就会创建一系列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

这将生成包括资源的应用程序，并将文件放入项目的 /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

启动 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: 找到了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

撒花
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39132095/article/details/120526794

智能推荐

synchronize锁升级-程序员宅基地

文章浏览阅读625次，点赞13次，收藏11次。Java中的synchronized关键字用于实现线程同步，保证多个线程对共享资源的操作具有原子性和可见性。在不同的JDK版本中，对synchronized的优化过程可能有所不同。在旧版本的JDK中，synchronized关键字的底层实现是依赖于操作系统的底层互斥量(mutex)来实现的。每次进入synchronized块时，会使用操作系统提供的互斥量进行加锁和解锁。这种方式在竞争不激烈的情况下效率较高，但在高并发场景下可能存在性能问题。从JDK 1.6开始，Java引入了和来优化。

日常软件集合-程序员宅基地

文章浏览阅读90次。2019独角兽企业重金招聘Python工程师标准>>> ..._mac astah community

服务器能ping通外界，但是外界无法ping通服务器_linux服务器能ping外面但是不能被ping-程序员宅基地

文章浏览阅读4.5k次。服务器直接接入路由器来获取ip（192.168.1.101）等等，所以可以直接ping通外界ip，但是不能被外界直接访问。先是关闭了防火墙，发现无济于事serivce iptables stop后来发现新服务器是通过路由器在连接到公网，所以外界根本不可能直接ping通这个192.168.2.101于是需要进入到路由器的设置界面进行修改，直接打开浏览器，输入路由器地址192.168.1.1，输入管理员密码进行设置。需要设置两处：1.设置DMZ，需要将DMZ打开2.设置虚拟路由器，让路由器能够转_linux服务器能ping外面但是不能被ping

11个值得珍藏的4K高清壁纸网站推荐_wallpaper abyss 官网-程序员宅基地

文章浏览阅读5.4w次，点赞33次，收藏248次。前言由于前几天因需求须找一些视觉素材，翻来覆去整了一些，整理了10个图片素材网站可以给大家收藏使用＆作为打开电脑 or 手机第一眼就看到的桌面，给它设置一个赏心悦目的桌面壁纸还是必不可少的。下面分享了 10 个值得珍藏的高清桌面壁纸网站，支持各种图片比例和分辨率，从 720P 到 4K、8K 应有尽有，电脑和手机都可以使用。高清桌面壁纸网站1. Awesome Wallpapers - wallhaven.cc官网：https://alpha.wallhaven.cc/.._wallpaper abyss 官网

解决方案聚焦：如何进行5G/毫米波产品性能测试_5g测速的解决方案-程序员宅基地

文章浏览阅读497次。在卫星通信中，随着24-100GHz频段5G-NR（新无线电）的发展，波束形成是实现相控阵和毫米波天线的关键技术。设备制造商现在正在开发具有5、9甚至17个毫米波端口的多端口波束形成设备，重点是为5G NR网络批量提供这些设备。对于生产测试应用，设备供应商正在寻找能够支持多站点、高性能的毫米波测试功能的测试解决方案。这些装置的试验要求包括： ..._5g测速的解决方案

四、EasyExcel实现Excel读写，封装工具类_easyexcel excellistener-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏6次。这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar_easyexcel excellistener

随便推点

国内免费可用的stun服务器（2020.7.14）_国内stun-程序员宅基地

文章浏览阅读5.2w次，点赞3次，收藏18次。端口号都是3478stun.xten.com stun.voipbuster.com stun.sipgate.net stun.ekiga.netstun.ideasip.comstun.schlund.destun.voiparound.comstun.voipbuster.comstun.voipstunt.comstun.counterpath.comstun.1und1.destun.gmx.netstun.callwithus.comstun.cou..._国内stun

FIFO溢出-FIFO上溢和FIFO下溢区别_fifo上溢和下溢-程序员宅基地

文章浏览阅读2.5k次，点赞3次，收藏7次。By: Ailson JackDate: 2021.11.28个人博客：http://www.only2fire.com/本文在我博客的地址是：http://www.only2fire.com/archives/141.html，排版更好，便于学习，也可以去我博客逛逛，兴许有你想要的内容呢。在调试芯片的某个外设的时候，如果该外设带有FIFO，那么一般情况下都有FIFO上溢和FIFO下溢的错误标志位，用于表示驱动对外设的FIFO操作是否正确，下面就是FIFO上溢和FIFO下溢对应的概念：FIFO上_fifo上溢和下溢

win10系统玩部分老游戏时提示0xc0000022的解决方法._游戏0xc0000032-程序员宅基地

文章浏览阅读2.6k次。在win10系统中玩一些游戏时会碰到以下提示,"应用程序无法正常启动（0xc0000022)",这是因为win10缺少了系统的某种组件引起的,因为win10相对之前的版本会有一些旧的组件被淘汰,而那些远古游戏需要依赖那些组件才能运行,于是出现以上报错.当开启游戏时系统会主动出现以下提示,只需要点击"安装此功能"将该组件下载即可.点击搜索栏,输入"控制面板" ,然后打开控制面板.之后点击程序, 进入程序界面后点击启用或关闭windows功能. 然后下拉找到旧版组件,点击左侧＋号. 将组件勾选然后单击下方确_游戏0xc0000032

R课程论文分享：对平均分数线的多元回归分析_r语言以平均分作为因变量拟生成500条某年大学录取分数线数据-程序员宅基地

文章浏览阅读887次，点赞28次，收藏18次。接着，以“地区”为类别，分类统计了15年各地区院校总计的院士位数、硕士点数、重点学科数、博士点数、985院校数、211院校数、非211院校数，并以\[acdmician\]、\[mp\]、\[keyd\]、\[dp\]、\[X985\]、\[X211\]、\[no211\]符号来代表。一个院校，其院士数、博士点、硕士点、重点学科数量越多，说明该校的教育资源就越丰富，相关的资金投入也就越多，往往学校也是约好的，学生自然就愿意选择这样的学校，需求增大，高考录取分数线自然也就越高。_r语言以平均分作为因变量拟生成500条某年大学录取分数线数据

Python 实战：如何给你的程序添加授权码机制_使用软件,作者要mac地址后给授权-程序员宅基地

文章浏览阅读8.9k次，点赞24次，收藏165次。本文实现了一个离线的简易的软件授权机制，如果想要分享自己的程序但又不希望自己的程序被随意传播的，都可以用得上，文末附有源码和示例程序，欢迎大家交流学习_使用软件,作者要mac地址后给授权

html在线客服插件,在线客服插件-程序员宅基地

文章浏览阅读681次。织梦dedecms在线客服插件是一款用于织梦CMS的在线客服插件，悬浮显示在网站右侧，可在后台添加或删除客服，支持QQ在线客服、阿里旺旺在线客服以及电话客服，支持客服分组功能，非常简单而且好用。下面是在线客服插件效果截图：后台效果后台添加编辑客服信息织梦DedeCMS在线客服插件安装使用详细教程：1，插件下载完成后将压缩包内相应编码文件夹里面的xml文件解压出来后在后台模块管理菜单里面上传,2，上..._织梦在线客服模块

推荐文章

热门文章

相关标签