Nuxt 2项目如何本地托管Google Fonts 避免从谷歌服务器加载字体

排查和解决步骤 #

• 第一步：检查nuxt.config.js的modules配置项，确认是否引入了@nuxtjs/google-fonts模块。如果有该模块直接移除即可，该模块默认会自动注入谷歌字体外链。
• 第二步：排查项目引入的UI组件库默认配置，这是最常见的注入来源：
  如果使用了@nuxtjs/vuetify模块，默认会自动引入谷歌Roboto字体和材质图标，需要在nuxt.config.js中添加禁用配置：

  vuetify: {
    defaultAssets: false, // 禁用默认资源注入
    // 其余原有vuetify配置保留
  }
  

  如果使用其他UI框架的Nuxt集成模块（如Element UI、Quasar等），同样检查对应配置项，关闭默认的外部字体引入开关。
• 第三步：兜底过滤注入资源
  如果排查完所有模块仍找不到注入来源，可以在nuxt.config.js中添加渲染钩子，直接过滤掉谷歌字体的外链标签：

  export default {
    // 其余原有配置保留
    hooks: {
      'vue-renderer:ssr:context'(context) {
        context.links = context.links.filter(link => {
          return !link.href?.includes('fonts.googleapis.com')
        })
      }
    }
  }
  

• 第四步：清理缓存重新构建
  修改完配置后，删除项目根目录下的.nuxt、dist文件夹，再重新执行nuxt build运行项目，避免旧构建缓存导致配置不生效。

你原来的本地字体引入配置是正确的，完成上述操作后即可完全禁用谷歌字体的远程请求。

内容的提问来源于stack exchange，提问作者Zeeshan Malik