Nuxt+Vuetify项目切换MDI为JS加载后仍加载CDN CSS如何解决

• 检查Vuetify全局配置：不管是nuxt.config.js中@nuxtjs/vuetify模块的配置项，还是自定义Vuetify插件的初始化参数，查看icons.defaultSet是否未显式设置为mdiSvg。Vuetify默认会使用字体图标模式，自动注入对应的CDN CSS资源，这个注入行为不会出现在你手动编写的Head HTML中。
• 检查Vuetify配置中是否存在icons.iconfont相关的配置项，这类配置会强制加载指定的字体图标CSS资源。
• 全局搜索所有<v-icon>的用法：排查是否仍存在字符串形式的图标调用，例如<v-icon>mdi-check</v-icon>这类写法。只要项目中存在任意一处字体图标名的字符串调用，Vuetify就会自动加载对应的字体CSS依赖。
• 检查是否有第三方依赖引入：部分基于Vuetify封装的第三方组件库，可能内部使用了字体图标模式，会触发CSS自动加载。

1. 显式指定Vuetify图标配置为SVG模式
   如果使用@nuxtjs/vuetify模块，在nuxt.config.js中添加配置：

export default {
  // 其他配置
  vuetify: {
    icons: {
      defaultSet: 'mdiSvg'
    }
  }
}

如果使用自定义Vuetify插件，修改插件初始化代码：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    defaultSet: 'mdiSvg'
  }
})

2. 替换所有字符串形式的图标调用
   全局搜索项目中所有mdi-开头的字符串图标名，全部替换为从@mdi/js导入的变量形式，确保没有漏改的用法。
3. 清理构建缓存后重新编译
   删除项目根目录下的.nuxt文件夹、node_modules/.cache文件夹，再执行yarn build重新构建后启动项目验证。

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