Nuxt 3生产构建中Vuetify无法正常加载Material Design Icons问题

我用Nuxt3搭配Vuetify3开发应用，通过Amplify部署。本地构建时v-icon组件能正常显示图标，但部署后的应用里图标有时会失效。

出现异常时我检查了网络面板，确认字体文件已经加载完成：

请问有人能帮忙解决这个问题吗？

Teach---gen对用以chem帮忙专家mp)(榜)(榜 #

相关配置与代码 #

使用v-icon的方式 #

<v-icon icon="mdi-calendar-month-outline" />

依赖版本 #

"dependencies": {
    "@mdi/font": "^7.2.96",
    "vuetify": "^3.2.1"
}

Nuxt配置文件 #

export default defineNuxtConfig({
  ssr: false,
  css: [
    'vuetify/styles',
    '~/assets/css/main.css',
    '@mdi/font/css/materialdesignicons.min.css',
  ],
})

Vuetify插件配置 #

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
    components: {
      ...labs,
      ...components,
    },
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

Amplify构建配置 #

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate 
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: '.output/public'
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

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