如何正确导入 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 会自动进行这样的导入： import UploadIcon from '@/components/icons/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 }
      }
    }
  };
};