[英]NUXT 3 Module Error on adding ant-design-vue
I am trying to add Ant Design Vue as module into Nuxt3 project.我正在尝试将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',
})
}
}
})
But it gives an error:但它给出了一个错误:
[nuxt] [request error] Only URLs with a scheme in: file, data are supported by the default ESM loader. [nuxt] [request error] 默认的 ESM 加载程序只支持带有方案的 URL:文件,数据。 On Windows, absolute paths must be valid file:// URLs.
在 Windows 上,绝对路径必须是有效的 file:// URL。 Received protocol 'c:'
收到协议 'c:'
I tried to use via path.resolve(__dirname, '...')
, but unsuccessful我尝试通过
path.resolve(__dirname, '...')
使用,但未成功
Node: v16.15.0 Nuxt: 3.0.0-rc.3 ant-design-vue: 3.2.5节点:v16.15.0 Nuxt:3.0.0-rc.3 ant-design-vue:3.2.5
After 2 day research finally I got the working solution.经过 2 天的研究,我终于得到了可行的解决方案。
npm i ant-design-vue @ant-design/icons-vue unplugin-vue-components --save
// 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'],
},
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.