在nuxt.js本地使用vuetify `mdi`图标，并屏蔽`cdn.jsdelivr.net` cdn

Question

我在nuxt.js生态系统中使用vuetify框架，但有一个问题！https://cdn.jsdelivr.net被我的国家Iran阻止了，每次用户想要加载Vue应用程序时，它都会卡住加载这个URI。因此，我想在我的应用程序中本地使用mdi图标，并以某种方式将它们存储在静态目录或其他地方。

请告诉我如何避免mdi CDN，并通过nuxt.config.js像使用另一个全局CSS一样使用它

Nuxt配置

css: [
    '@/assets/main.css',
    '@mdi/font/css/materialdesignicons.css'
  ],
vuetify: {
    rtl: true,
    lang: {
      locales: {
        fa
      },
      current: 'fa'
    },
    options: {
      customProperties: true,
    },
    theme: {
      light: true,
      themes: {
        light: {
          primary: '#15977D',
          secondary: '#205072',
          accent: '#82B1FF',
          error: '#FF5252',
          danger: '#f62d51',
          success: '#36bea6',
          warning: '#FFC107'
        },
      },
    },
    customVariables: ['~/assets/variables.scss'],
    icons: {
      iconfont: 'mdi',
    },
  },

浏览器网络面板

​

​

Answer 1

我们应该从验证选项中禁用defaultAssets

vuetify: {
    defaultAssets: false,
}

Answer 2

您应该访问CDN's CSS file，将其内容复制到项目中的本地.css文件中，然后使用类似css: ['~/assets/css/materialicons.css']的内容导入它。