你会注意到在 src 目录下有一个文件 registerServiceWorker ，其中包含了默认的配置。在项目的根目录下，如果 vue.config.js 不存在，请创建它，如果存在，请添加以下内容：
// vue.config.js module.exports = { pwa: { workboxOptions: { skipWaiting: true, clientsClaim: true, }, }, };
vue-cli 工具使用PWA plugin 生成 service worker。在底层，它使用 Workbox 来配置 service worker 和它控制的元素、要使用的缓存策略以及其他必要的配置。
在上面的代码片段中，我们要确保我们的应用程序始终由 service worker 的最新版本控制。这是必要的，因为它确保我们的用户总是查看应用程序的最新版本。您可以签出 Workbox 配置文档，以获得对生成的 service worker 行为的更多控制。
接下来，我们将自定义字体添加到 public 目录。我有以下结构：
root/ public/ index.html fonts/ Roboto/ Roboto-Regular.woff Roboto-Regular.woff2
一旦完成了 Vue 应用程序的开发，就可以通过从终端运行以下命令来构建它：
yarn build
这将结果输出到 dist 文件夹中。如果你检查文件夹的内容，你会注意到一个类似于 precache-manifest.1234567890.js 的文件。它包含了要缓存的资产列表，这只是一个包含修订版和 URL 的键值对的列表。
self.__precacheManifest = (self.__precacheManifest || []).concat([ { "revision": "3628b4ee5b153071e725", "url": "/fonts/Roboto/Roboto-Regular.woff2" }, ... ]);
public/ 文件夹中的所有内容都是默认缓存的，其中包括自定义字体。有了这个地方，你可以用像 service 这样的包来 serve 你的应用程序，或者把 dist 文件夹托管在 web 服务器上查看结果。你可以在下面找到一个应用程序的截图。
在随后的访问中，字体是从缓存中加载的，这可以加快应用程序的加载时间。
结论在这篇文章中，我们研究了在 Vue 应用程序中加载字体时应用的一些最佳实践。使用这些实践将确保你提供的字体看起来不错，而不影响应用的性能。
到此这篇关于在Vue.js中加载字体的正确方法的文章就介绍到这了,更多相关vue.js 加载字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: