flutter 内网部署处理 gstatic字体+canvasit

原因

要给学生搭建实验环境,但机房暂时不能上网。flutter web加载时下载的canvasit与fonts.gstatic.com中的字体统统不能下载。白屏。

参考文章

flutter 打包web项目 部署到内网: link.
Flutter web build 把 canvaskit 转为本地 URL: link.

关键代码

①在项目的根目录的web目录下,新建flutter_bootstrap.js文件

flutter_bootstrap.js 代码解读复制代码

{{flutter_js}}
{{flutter_build_config}}

const loading = document.createElement('div');
document.body.appendChild(loading);
loading.textContent = "Loading Entrypoint...";
_flutter.loader.load({
  config: {'canvasKitBaseUrl': './canvaskit/'},
  serviceWorkerSettings: {
      serviceWorkerVersion: {{flutter_service_worker_version}},
  },
  onEntrypointLoaded: async function(engineInitializer) {
      loading.textContent = "Initializing engine...";
      const appRunner = await engineInitializer.initializeEngine({'fontFallbackBaseUrl': './assets/fonts/'});
      loading.textContent = "Running app...";
      await appRunner.runApp();
   }
});

注意字体的文件夹’./assets/fonts/’ 在项目根目录的web目录下建立,还要根据字体建立不同的子文件夹。比如:
原字体下载链接http://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYkldv7JjxkkgFsFSSOPMOkySAZ73y9ViAt3acb8NexQ2w.113.woff2 就要建立/assets/fonts/notosanssc/v37/的文件夹,并把字体文件放进去。
原字体下载链接http://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Me4GZLCzYlKw.woff2 就要建立/assets/fonts/roboto/v32/的文件夹,并把字体文件放进去。

建立子文件夹主要是字体使用时,还要拼上链接里的字段。还没有想出好更好的去除办法。

②将index.html文件中flutter_bootstrap.js的引用方式改为下面的方式:

js 代码解读复制代码

<script>
  {{flutter_bootstrap_js}}
</script>

后续打包部署

flutter build web -d Chrome

我是将生成的build文件夹里的web重命名后直接拷到tomcat 下的webapps文件夹里发布了。
web文件夹里仔细看的话,已经包含了我们要离线下载的canvasit和gstatic的资源文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值