【Flutter web】内网网站如何发布?解决外网下canvaskit.js和字体无法加载问题_flutter web canvaskit.js-程序员宅基地
技术标签： dart flutter android 前端 android studio Flutter
背景
由于部署的网站只能在内网下使用，部署服务器又不能访问外网，导致Flutter web部署遇到很多问题，比如：白屏。
部署的网站为何首次加载缓慢，会白屏？
通过浏览器开发工具看图：
可以看到css和ttf文件加载失败了（也要注意cancaskit.js和canvaskit.wasm这两个文件，内网环境下肯定也是不能fetch的），那么白屏或者白屏后字体不见了问题就是这个获取失败了，查看这两个文件加载地址：
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
和
https://fonts.googleapis.com/css2?family=Noto+Sans+JP
googleapis这个css肯定要翻墙获取了,ttf这个URL如果是内网那么肯定也是失败的。
结论：没有外网环境，想要内网打开网站，需要解决三个地址加载：
- canvaskit.js和canvaskit.wasm
- KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
- css2?family=Noto_Sans+JP
PS：css2?family=Noto_Sans+JP应该是日语文字的css，我们需要的是css2?family=Noto_Sans+SC应该是简体中文。
因此，我们只需要将这三个步骤的文件放到我们本地项目目录或者内网环境，将其加载的路径更换成本地路径或者是内网环境路径即可。
本地化加载canvaskit.js和canvaskit.wasm
参考文章：https://blog.csdn.net/Bright_TY/article/details/120225419
Canvaskit渲染引擎下载太慢，SDK包中地址是：https://unpkg.com/[email protected]/bin/，我们通过浏览器访问该地址，下载下来这两个文件，放到项目的web/assets/canvaskit中。
然后通过配置flutter run的启动参数：
--web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=./assets/canvaskit/ --release
或者命令行直接运行：
flutter run --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=./assets/canvaskit/ --release
PS：–release一定要加
我们再通过浏览其查看canvaskit.js和canvaskit.wasm加载地址：
看到已经完成本地加载。
本地化加载KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf字体文件
首先将该字体文件下载下来。
然后放到web/assets/canvaskit/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf，也可以自己选择路径，但需要注意，如果你项目打包放在服务器后，如果不能在其他内网主机上访问到这个路径，将不能成功加载。
如何将这个字体文件改成本地加载呢？
通过搜索build目录下的main.dart.js关键词，能够找到：
我们将该加载地址更改为：
./assets/canvaskit/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf
本地化加载css2?family=Noto_Sans+SC
先要保存这个css文件，css2?family=Noto_Sans+SC访问路径是：
https://fonts.googleapis.com/css2?family=Noto+Sans+SC
复制里边的css内容，新建一个文档保存为css类型，本人新建的文件名叫：local.google.fonts.css，查看css内容：
我们发现css中加载的地址也需要改，我们把这些woff2（Web Open Font Format）文件下载下来，同志一看肯定惊呆了，这么多，任务量太大了，批量任务把，最后将这些文件放到了web/assets/canvaskit/下，
最后需要解决的是css2?family=Noto_Sans+SC加载地址更换，还是搜索build目录下的main.dart.js关键词，替换为本地路径：
至此为止，我们已经完成了地址更换。
**注意：注意：注意：注意：注意：注意：
** build/web/目录下得main.dart.js你每次编译后都需要执行第二步和第三步
最后附上打包命令：
flutter build web --web-renderer canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=./assets/canvaskit/ --release
智能推荐
Windows下超详细安装Anaconda3以及jupyter notebook_下载anaconda后还要下载jupyter-程序员宅基地
文章浏览阅读3.3k次。1.下载Anaconda安装包Anaconda官网网站：https://www.anaconda.com/products/individual下载安装包速度比较慢，国内小伙伴不建议尝试。我们可以使用清华大学开源软件镜像站：清华大学开源软件镜像站：https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/，请选择适合自己系统自行下载。下载完成后如下图：1.安装Anaconda安装包1.打开安装包，点击Next2.点击I Agre_下载anaconda后还要下载jupyter
chromium源码下载并编译_chromium git仓库下载-程序员宅基地
文章浏览阅读1.7w次。目前，chromium的源代码已经全部迁移到了git管理，所以本文主要梳理一下下载chromium源代码的过程。一、概况chromium现在分为四个大分支：canary：最前沿的版本，每天都发布，bug一堆，不适合新人dev：每两个星期发布，比较稳定，可以体验新功能和新特性deta：每周小版本更新，六周大版本更新。比dev稳定，比同期dev版小1个版本号，基本上是stable的待发版本sta_chromium git仓库下载
AXI4协议详解（一）_关于axi4描述正确的是-程序员宅基地
文章浏览阅读6.2k次，点赞12次，收藏81次。写在前面：AMBA总线协议在SOC设计中的地位是不言而喻的，从本篇文章开始，将会依托于官方手册详解AXI4、AXI4-LITE、AHB、APB等目前最常见的AMBA总线协议，梳理一下其中常用的知识点。本篇为AXI4协议的开篇，更多解析将会在之后继续分享给大家。AXI4协议是amba协议中比较新的一个协议，目前应用的也很广泛。例如在ZYNQ核的ARM与FPGA部分信息交互中就大量应用了AXI4总线协议，官方手册给出了以下几点的AXI协议特点：地址/控制信号与数据处于不同阶段支持非对齐数据传输支持._关于axi4描述正确的是
element ui table表头样式修改_header-row-class-name-程序员宅基地
文章浏览阅读3.6k次。网上找了不少方法，都不行，可能是因为版本的问题，下面直接写成可以成功的方法吧：给表格一个代表表头的类header-row-class-name <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" header-row-class-name_header-row-class-name
EndNote设置导出参考文献格式为中文国标GBT7714_endnote参考文献国标gb/t7714-程序员宅基地
文章浏览阅读4w次，点赞36次，收藏60次。笔者使用的版本是最新的EndNote 20，其他版本大同小异。依次打开：Tools -> Output Styles -> Open Style Manager。其他版本可能有差异，只要找到Open Style Manager即可。在列表里找到，勾上即可。而现在还没有安装，找不到Chinese Standard，所以要下载。点击Get More on the Web...。打开后搜索关键词Chinese，下载Chinese Standard GBT7714，这是目前国内中文期刊、高校_endnote参考文献国标gb/t7714
荣品3568移植调试iptables(基于buildroot)_buildroot里面增加iptables-程序员宅基地
文章浏览阅读852次。荣品3568移植调试iptables(基于buildroot)1 配置buildroot配置文件1.进入buildroot/output/rockchip_rk3568 执行 make menuconfigTarget packages ---> Networking applications ---> 添加此两项编译 [*]ipset [*]iptables保存.config退出make savedefconfi_buildroot里面增加iptables
随便推点
k30s刷鸿蒙系统,Redmi K30S至尊版喜提MIUI 12.5稳定版-程序员宅基地
文章浏览阅读3.3k次。Redmi K30S至尊版喜提MIUI 12.5稳定版2021-05-07 13:20:0516点赞18收藏104评论进入5月，第二批升级MIUI 12.5的机型也陆续开启推送，在五一小长假期间包括Redmi K40标准版、小米CC9等机型均已收到MIUI 12.5稳定版的推送升级。今日，根据网友反馈，号称Redmi唯一的骁龙865 LCD旗舰——Redmi K30S至尊纪念版也在今日下午收到了M..._k30s刷鸿蒙
如何使用Hyper-V Manager和Powershell合并Hyper-V检查点-程序员宅基地
文章浏览阅读5.9k次，点赞2次，收藏4次。如何使用Hyper-V Manager和Powershell合并Hyper-V检查点Hyper-V检查点在Hyper-V虚拟机的整个生命周期管理中起着关键作用，因为它们可以在出现问题时通过有效的回滚机制有效地管理和执行软件更新，升级和安装。在最新版本的Hyper-V中，Microsoft增强了检查点功能并将其添加到更强大的功能中，包括生产检查点以及利用了ReFS文件系统的优势..._hyper-v manager
Php7.1 编译安装_pear package php_archive not installed: generated -程序员宅基地
文章浏览阅读1.4w次。EnvironmentCentOS Linux release 7.5.1804 (Core)Process获取 Php7.1 官方安装包wget -c http://cn2.php.net/get/php-7.1.27.tar.gz/from/this/mirror解压安装包tar -xzvf mirror查看配置项./configure --help配置..._pear package php_archive not installed: generated phar will require php's ph
AFAB 科目要求一个成本会计分配_sap 发料时报ki235-程序员宅基地
文章浏览阅读1.1w次。科目 6598000010 要求一个成本会计分配 消息号 KI235 诊断 尚未给和成本会计相关的科目定义一个 CO 科目分配。 系统响应 科目6598000010被定义为一个成本要素。 这意味着必须始终指定一个 CO 科目分配。 步骤 输入下列 CO 科目分配中的一个 解决： 初步分析，应该对科目_sap 发料时报ki235
C# 开发WCF基本步骤（以控制台为宿主）_c# wcf 控制台-程序员宅基地
文章浏览阅读1.6k次。文章目录基本步骤定义传输数据类型基本说明实例代码代码代码说明定义请求契约基本说明实例代码代码说明实现业务逻辑基本说明实例代码代码说明定义配置文件实例代码代码说明将契约接口注册到控制台中基本说明实例代码代码说明网页请求Js代码基本步骤定义传输数据类型定义请求契约网络访问的接口URLController的方法接口实现网络请求接口定义配置文件申明服务（ABC三要素）申明行为约..._c# wcf 控制台
使用python将COCO格式的json文件转化为VOC格式的xml文件_coco格式转xmi格式-程序员宅基地
文章浏览阅读1.4k次，点赞4次，收藏21次。起因是得到一批标准的COCO数据集(json文件)，自己后来又手动标了一批数据，但是标注出来的文件是VOC格式，现在想要把这些数据合并到一起，再转成标准的COCO数据集用于训练。个人觉得json转xml更简单，且已有xml转json代码，所以选择将部分json文件转为xml文件再做处理，参考了相关博客： 简单调整了一下，亲测可用。附上代码：import osimport timeimport jsonimport pandas as pdfrom tqdm import tqdmfrom py_coco格式转xmi格式