在 nuxt.js 中本地使用 vuetify `mdi` 图标并阻止 `cdn.jsdelivr.net` cdn

Question

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

请告诉我如何通过 nuxt.config.js

避免使用 mdi CDN 并像使用另一个全局 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

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

的内容导入它

Answer 2

我们应该从 vuetify 选项中禁用 defaultAssets

vuetify: {
    defaultAssets: false,
}

在 nuxt.js 中本地使用 vuetify `mdi` 图标并阻止 `cdn.jsdelivr.net` cdn

Use vuetify `mdi` icons locally in nuxt.js and block `cdn.jsdelivr.net` cdn

javascript

nuxt.js

vuetify.js

Nuxt 配置

浏览器网络面板