Nuxt JS - 当在 nuxt.config.js 中关闭默认资产加载时，Vuetify 组件的默认图标将不会显示

Question

我正在使用 Nuxt V2.15.7 和 Vuetify V2.5.5。为了优化生产应用程序，我关闭了 nuxt.config.js 文件中的 defaultAssets 加载。

vuetify: {
  defaultAssets: false,
}

在每个页面或组件中，因此我必须手动加载图标，例如

<template>
  <div>
    <v-autocomplete
      v-model="selectedItems"
      outlined
      clearable
      multiple
      :clear-icon="svgMdiWindowClose"
      :items="items"
    />
  </div>
</template>

<script>
import { mdiWindowClose } from '@mdi/js'
export default {
  data() {
    return {
      svgMdiWindowClose: mdiWindowClose,
      items: [],
      selectedItems: [],
    }
  },
}
</script>

在大多数情况下，这工作正常，但如果使用自动完成，我将不得不手动创建所有插槽、点击事件等。有没有更好的方法来使用默认图标而不影响网站的灯塔分数？我不想为这个特定页面加载所有图标，我只想导入我需要的图标，但默认情况下 Vuetify componenets 通过字符串引用图标，例如 mdi-window-close

有没有办法只导入我知道特定组件需要的组件？

Answer 1

我的 nuxt.config.js 中有这些设置，一切正常，试一试：

vuetify: {
  defaultAssets: false,
  treeShake: true,
  icons: {
    iconfont: 'mdiSvg',  // --> this should be enough

    // sideNote: you can also define custom values and have access to them
    // from your app and get rid of the imports in each component

    values:{
       plus: mdiPlus, // you have access to this like $vuetify.icons.values.plus from your component
    }
  }
}

Nuxt JS - 当在 nuxt.config.js 中关闭默认资产加载时，Vuetify 组件的默认图标将不会显示

Nuxt JS - Default icons of Vuetify components will not show when the default assets loading has been turned off in nuxt.config.js

nuxt.js

vuetify.js