这里写自定义目录标题
原因
要给学生搭建实验环境,但机房暂时不能上网。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的资源文件