添加 ant-design-vue 时出现 NUXT 3 模块错误答案

【问题标题】：NUXT 3 Module Error on adding ant-design-vue添加 ant-design-vue 时出现 NUXT 3 模块错误
【发布时间】：2022-06-15 19:09:21
【问题描述】：

我正在尝试将 Ant Design Vue 作为模块添加到 Nuxt3 项目中。

    import { fileURLToPath } from "node:url"
    import { defineNuxtModule } from "@nuxt/kit"
    export default defineNuxtModule({
      setup (_, nuxt) {
        nuxt.options.css.push("ant-design-vue/dist/antd.css")
      },
      hooks: {
        "components:dirs" (dirs) {
          dirs.push({
            path: fileURLToPath( new URL('../node_modules/ant-design-vue/lib', import.meta.url) ),
            pattern: '*/index.js',
            prefix: 'a',
          })
        }
      }
    })

但它给出了一个错误：

[nuxt] [请求错误] 默认 ESM 加载器仅支持具有以下方案的 URL：文件、数据。在 Windows 上，绝对路径必须是有效的 file:// URL。收到协议'c:'

我尝试通过path.resolve(__dirname, '...')使用，但不成功

节点：v16.15.0 努克斯特：3.0.0-rc.3 ant-design-vue: 3.2.5

【问题讨论】：

标签： typescript vuejs3 nuxtjs3 ant-design-vue

【解决方案1】：

经过 2 天的研究，我终于找到了可行的解决方案。

将 ant-design-vue 和图标添加到 NUXT 3 项目中

安装依赖

npm i ant-design-vue @ant-design/icons-vue unplugin-vue-components --save

将其添加到 nuxt.config 文件中

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineNuxtConfig({
 
  vite: {
    plugins: [
      Components({
        // add option {resolveIcons: true} as parameter for resolving problem with icons
        resolvers: [AntDesignVueResolver({resolveIcons: true})],
      }),
    ],
    // @ts-expect-error: Missing ssr key
    ssr: {
      noExternal: ['moment', 'compute-scroll-into-view', 'ant-design-vue','@ant-design/icons-vue'],
    },  
  },
})

享受自动导入的魔力

【讨论】：