Nuxt.js: 如何在 nuxt.config.js 文件中包含一个异步脚本？

Question

我有以下脚本来为我的站点异步加载任何 Google 字体：

<!-- Load Google Fonts Asynchronously -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
  WebFont.load({google:{families:['IBM+Plex+Sans']}});
</script>
<!-- End Load Google Fonts Asynchronously -->

通常，在我的 Vue.js 应用程序中，我只是将其添加到 /public 目录内的 index.html 的头部，但是，我想知道如何将其全局添加到我的 nuxt.js SSR 应用程序的头部？

Answer 1

您可以按照带有 Google Analytics 的 nuxt 文档中的示例来导入和执行外部库：https://nuxtjs.org/faq/google-analytics/

但另一种更简单的方法是使用 webfontloader:

1/ 使用 npm 或 yarn 安装 webfontloader

npm install webfontloader --save

2/ 创建自定义插件

// plugins/webfont.js

const WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['IBM+Plex+Sans']
  }
});

3/ 启用过滤器

// nuxt.config.js:

plugins: [
  {src: '~plugins/webfont.js', ssr: false}
],

由于 ssr: false 选项，插件将仅在客户端渲染时执行。

Nuxt.js: 如何在 nuxt.config.js 文件中包含一个异步脚本？

Nuxt.js: How to include an asynchronous script in the nuxt.config.js file?

nuxt.js