Nuxt Vuetify Google Fonts Undefined - Javascript

简介

本文将介绍在使用 Nuxt.js 和 Vuetify 进行开发时，遇到 Google 字体加载问题的解决方式。问题表现为 “FontFamily 'Roboto' is not a system font and has not been loaded through <link>。具体解决方案为：

解决方案

请在 nuxt.config.js 文件中添加以下代码：

export default {
  head: {
    link: [
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'
      }
    ]
  }
}

以上代码将加载所需的 Google 字体库和 Material Icons 。并通过 rel='stylesheet' 属性将其链接到您的应用程序中。另外，还需要通过 v-app 属性为您的 Vuetify 应用程序设置一个根节点，以确保您的 Vuetify 应用程序能够访问到正确的字体。统一添加如下代码即可：

<v-app>
  <!-- your code here -->
</v-app>

结论

本文简要介绍了在使用 Nuxt.js 和 Vuetify 进行开发时，遇到 Google 字体加载问题的解决方法。我们建议您在添加本文所示的代码之前，仔细检查您的代码是否存在其他问题，例如未导入正确的库文件等问题。希望能为您提供帮助。