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

原创于 2025-04-06 20:21:12 发布 · 575 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #firefox #前端 #chrome

这里写自定义目录标题

原因

原因

要给学生搭建实验环境，但机房暂时不能上网。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的资源文件