你会留意到在 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 加载字体内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: