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

1. 创建web文件夹

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

flutter create .

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

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等浏览器兼容)

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

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

撒花

本文链接：https://blog.csdn.net/qq_39132095/article/details/120526794

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

D435i安装使用（Ubuntu18.04+ROS1+TX2）_d435i ros-程序员宅基地

文章浏览阅读259次。在Realsense-ROS节点的Launch文件夹中，编辑rs_camera.launch文件，将下列三个参数项改成true。进入pyrealsense2-2.48.0.3381-cp37-cp37m-win_amd64.whl所在的文件夹，然后输入。当出现“RealSense Node Is Up!pip安装pyrealsense2的时候，通过下面命令难以安装成功。连接摄像头建立python文件。，若输入如下图所示，即表示成功。1.1 注册 key。若如下图所示即表示成功。3.3 设置环境变量。_d435i ros

JAVA如何读取写入文件，InputStream与OutputStream_inputstream写入outputstream-程序员宅基地

文章浏览阅读6.2k次。一、背景介绍Java的流式输入输出建立在4个抽象类的基础上：InputStream,OutputStream,Reader和Writer。它们用来创建具体的流式子类。InputStream和OutputStream类被设计为字节类，而Reader和Writer被设计为字符流类。本文只是讲字节流类。字节流中的两个顶层类为：InputStream(输入字节流）和OutputStream(输出字节流）. 其下有两个子类FileInputStream(文件输入流）和FileOutputStream(文件输._inputstream写入outputstream

【codeforces】【比赛题解】#872 CF Round #440 (Div.2)-程序员宅基地

文章浏览阅读139次。链接。【A】寻找漂亮数字题意：给定了两列非零数字。我们说一个数是漂亮的，当它的十进制表达中有至少一个数从数列一中取出，至少有一个数从数列二中取出。最小的漂亮数字是多少？输入：第一行两个数\(n,m(1\leq n,m\leq9)\)，表示数列一、二的长度。第二行n个数，表示数列一。第三行m个数，表示数列二。题解： 1 #include<cstdio&..._codeforces round 872

ios 访问相机权限弹框的点击方法获取_js拉起ios相机权限弹窗-程序员宅基地

文章浏览阅读6.2k次。 NSString *mediaType = AVMediaTypeVideo;//读取媒体类型 AVAuthorizationStatus authStatus = [AVCaptureDevice authorizationStatusForMediaType:mediaType];//读取设备授权状态 [AVCaptureDevice requestAccessForMe..._js拉起ios相机权限弹窗

LATEX_latex fontenc 什么意思-程序员宅基地

文章浏览阅读1.6w次。1、latex注释LaTeX中单行注释用%% \documentclass[a4paper,cs4size,UTF8,punct,linespread=1.56]{ctexart}多行注释可以用iffalse和fi包含，如下：iffalsefi1、documentclass文档类型可由\documentclass 命令来指定。\documentclass[option]{class}clsss 指定想要的文档类型。通过options 参数可以定制文档类的属性。 _latex fontenc 什么意思

WWDC - iOS内存性能及原理笔记_苹果内存使用原理-程序员宅基地

文章浏览阅读2.1k次。iOS内存的基本原理内存是如何初始化和被管理的?在iOS内,指针的地址范围很大, 32位CPU上有 4GB 大小, 64位CPU上有 18EB 大小 (大约有2的60次方), 这么大的指针地址范围会致使我们看来系统内存有这么大,实际上物理内存可能没有这么大,这个大小被称为虚拟内存, 在OS X 中系统使用硬盘来存储内存中不经常使用的数据来作为内存的后备存储, 在内存中存有硬盘数据的指针地址, 需要_苹果内存使用原理

随便推点

hdu 2048 神、上帝和老天爷_du 2006'10 acm contest的颁奖晚会隆重开始了!为了活跃气氛,组织者举行了一个别开-程序员宅基地

文章浏览阅读504次。神、上帝和老天爷（错位排列）Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64uSubmit StatusDescriptionHDU 2006'10 ACM contest的颁奖晚会隆重开始了！为了活跃气氛，组织者举行了一个别开生面、奖品丰厚的抽_du 2006'10 acm contest的颁奖晚会隆重开始了!为了活跃气氛,组织者举行了一个别开

Matlab图像的数学形态学处理（实验源码+截图）_matlab实现图像的处理以及用按钮实现源代码-程序员宅基地

文章浏览阅读1.7k次。MatlabMatlab图像的数学形态学处理（实验源码+截图）,图片可以更换，记得先把图片所在文件夹导入matlab中哦，否则matlab在没有绝对路径的情况下会找不到图片，报错哦_matlab实现图像的处理以及用按钮实现源代码

IDEA mybatis mapper接口文件跳转xml文件插件_mapper文件跳转到xml-程序员宅基地

文章浏览阅读3.5k次。idea mybatis跳转插件_mapper文件跳转到xml

linux免杀工具,kali 免杀工具shellter安装以及使用-程序员宅基地

文章浏览阅读877次。Shellter 是一款动态 shellcode 注入工具，我们可以将shellcode注入到其它程序上，从而来躲避杀毒软件的查杀。俗称为免杀官网：https://www.shellterproject.com/ 目前最新版本是7.2，主程序是.exe文件所以在windows下可以直接使用，在linux上运行的话就需要安装wine环境来运行。我使用的Kali Linux 版本是kali-linu..._shellter安装

计算机视觉 | 面试题：16、为什么使用F1 score？_fl score 意义-程序员宅基地

文章浏览阅读537次。问题为什么使用F1 score？（这里主要讨论为何使用 F1 score 而不是算术平均）F1 scoreF1 score是分类问题中常用的评价指标，定义为精确率（Precision）和召回率（Recall）的调和平均数。F1=11Precision+1Recall=2×Precision×RecallPrecision+RecallF1=\frac{1}{\frac{1}{Precision}+\frac{1}{Recall}}=\frac{2×Precision×Recall}{Precisi_fl score 意义

数字经济与数字化转型_中国经济的数字化发展与数字化转理主要包括包括哪些-程序员宅基地

文章浏览阅读8.8k次。2020年5月13日下午，国家发展改革委官网发布“数字化转型伙伴行动”倡议。倡议提出，政府和社会各界联合起来，共同构建“政府引导—平台赋能—龙头引领—机构支撑—多元服务”的联合推进机制，以带动中小微企业数字化转型为重点，在更大范围、更深程度推行普惠性“上云用数赋智”服务，提升转型服务供给能力，加快打造数字化企业，构建数字化产业链，培育数字化生态，形成“数字引领、抗击疫情、携手创新、普惠共赢”的数字化生态共同体，支撑经济高质量发展。【3】一、数字经济内涵【2】国家在推进数字经济，涵盖三个层..._中国经济的数字化发展与数字化转理主要包括包括哪些