如何在Nuxt/Vuetify中关闭Google Fonts和Material Design Icons加载

你遇到的两个外部请求分别是Vuetify框架默认自带的Roboto字体谷歌CDN资源，以及Material Design Icons的jsDelivr CDN资源，无需修改业务源码，只需调整Vuetify配置即可完全禁用。Chrome和Firefox的资源加载拦截、报错提示策略存在差异，是Firefox没有显式抛出报错的原因。

前置操作 #

先安装本地MDI图标依赖，避免禁用CDN后图标失效：

• 执行安装命令：npm install @mdi/font -D，使用yarn/pnpm的用户替换为对应包管理器的安装命令即可。

分版本配置 #

Nuxt 2 + @nuxtjs/vuetify 模块场景 #

修改项目根目录下的nuxt.config.js配置文件：

export default {
  // 其余原有配置保持不变
  vuetify: {
    // 禁用默认加载的外部资源（包含Google Fonts和默认图标CDN）
    defaultAssets: false,
    // 开启treeShake会自动禁用默认外部资源加载，同时可减小打包体积，推荐开启
    treeShake: true,
    // 指定图标库为本地MDI
    icons: {
      iconfont: 'mdi',
    },
  },
  // 引入本地安装的MDI图标样式文件
  css: [
    '@mdi/font/css/materialdesignicons.css'
  ],
}

Nuxt 3 + vuetify-nuxt-module 模块场景 #

修改项目根目录下的nuxt.config.ts配置文件：

export default defineNuxtConfig({
  // 其余原有配置保持不变
  vuetify: {
    // 禁用默认加载的外部资源
    defaultAssets: false,
    // 指定图标库为本地MDI
    icons: {
      defaultSet: 'mdi',
    },
  },
  // 引入本地安装的MDI图标样式文件
  css: [
    '@mdi/font/css/materialdesignicons.css'
  ],
})

验证 #

配置完成后清理本地构建缓存，重新启动开发服务或打包项目即可，两个外部CDN请求会完全消失。

如果项目需要保留Roboto字体，可自行将字体文件下载到本地项目目录，通过CSS规则引入即可，无需依赖谷歌CDN。

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