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应用程序中，我只是将其添加到index.html目录中的/public的开头，但是，我想知道如何将其全局地添加到开头我的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文件中包含异步脚本？

1 个答案: