nuxt.js - 如何在 nuxt.config.js 中正确导入组件以用作自定义图标？

Question

我正在尝试将 SVG 文件用作自定义图标，在 nuxt.config.js 中使用此结构:

import UploadIcon from '@/components/icons/UploadIcon'

export default {
...
    vuetify: {
       customVariables: ['~/assets/variables.scss'],
       icons: {
           values: {
              upload: {
                  component: UploadIcon  <------here is my custom icon
              }
           }
       }
    }
 },

Nuxt 显示错误:

   │   ✖ Nuxt Fatal Error                                                          │
   │                                                                               │
   │   Error: Cannot find module '@/components/icons/UploadIcon'                   │
   │   Require stack:                                                              │
   │   - C:\Users\Admin\Documents\portfolio\artwork\artwork\nuxt.config.js         │

问题是 IDE 会自动执行这样的导入:从“@/components/icons/UploadIcon”导入 UploadIcon

而且它不起作用。我尝试了什么:

1. 在组件路径中使用 ~ 而不是 @。
2. 路径的其他变体，包括绝对路径。

但是，当我尝试使用绝对路径时，它显示了这样的错误:

   ╭───────────────────────────────────────╮
   │                                       │
   │   ✖ Nuxt Fatal Error                  │
   │                                       │
   │   SyntaxError: Unexpected token '<'   │
   │                                       │
   ╰───────────────────────────────────────╯

所以我找不到办法，我检查了这些文档:

• https://github.com/nuxt-community/vuetify-module#defaultassets
• https://vuetifyjs.com/en/features/icon-fonts/

一般来说，我一直在尝试遵循这个答案:https://stackoverflow.com/a/58563938/7017890但是使用了一个常规的 vuetify.js 配置文件。对于 Nuxt，它不起作用。

Answer 1

首先，我建议使用 vuetify.options.js 配置文件，而不是从 nuxt.config.js ( @nuxtjs/vuetify documentation ) 加载配置。

在您的 vuetify.options.js 文件中(将其保存在顶级目录)

// Note the lack of a leading slash (/)
import myCustomIcon from "components/icons/UploadIcon";

export default function () {
  return {
    // other vuetify options here,
    icons: {
      values: {
        upload: { component: myCustomIcon }
      }
    }
  };
};