Vue.js 3：在 Vue PWA 中离线存储视频

Question

我正在使用带有 Typescript 的 Vue 3。我正在尝试在 PWA 中显示视频。它在网上运行良好，但当我离线尝试时，视频无法加载。我将视频存储在 assets 文件夹中，在完成的 dist 中，视频位于 media 文件夹中。感谢您的帮助。

  <video autoplay loop class="video">
    <source :src='require("@/assets/videos/test.mp4")' type='video/mp4'>
  </video>

Answer 1

我自己找到了解决方案。

使用 localstorage 或 indexedDB（对于视频）可以轻松完成。只能对 iOS 上的小视频执行此操作，因为移动版 Safari 的限制为 50MB (https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker#how_much_can_you_store)

可以在这里找到另一个没有 indexedDB 的解决方案：

Vue.js 3: Store videos offline in a Vue PWA