我在使用ViteJS和NPM为Vue 3构建自定义组件库时遇到了问题。我在下面列出了我的问题的基本说明,能不能有人告诉我我做错了什么,或者指出了正确的方向,我已经被困在这个问题上2天了。
我的文件夹结构:
- paragraph.js
package.json
{
"name": "paragraph",
"private": true,
"version": "0.0.0",
"description": "The paragraph test component.",
"main": "./dist/paragraph.umd.js",
"module": "./dist/paragraph.es.js",
"exports": {
".": {
"import": "./dist/paragraph.es.js",
"require": "./dist/paragraph.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
}
}
vite.config.js
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: fileURLToPath(new URL('./src/paragraph.js', import.meta.url)),
name: 'Paragraph',
fileName: (format) => `paragraph.${format}.js`,
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
},
},
},
},
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
paragraph.js
import Paragraph from './components/Paragraph.vue';
export default {
install: (app) => {
app.component('Paragraph', Paragraph);
},
};
Paragraph.vue
<script setup>
console.log('Test');
</script>
<template>
<p class="paragraph">
<slot />
</p>
</template>
<style>
.paragraph
{
color: black;
}
</style>
当我成功地运行npm run build
并创建正确的文件时,我将es文件作为插件包含到我的test项目中。
import { createApp } from 'vue'
import App from './App.vue'
import Paragraph from '../../paragraph/dist/paragraph.es.js'
createApp(App).use(Paragraph).mount('#app')
该组件在使用时不工作,就像这样。
<Paragraph>Hello World 2!</Paragraph>
下面的错误报告在控制台中。
TypeError: Cannot read properties of null (reading 'isCE')
我研究过这个问题,似乎很多人都有同样的问题,虽然我自己找不到解决办法。
我尝试了以下链接中提到的解决方案:
https://github.com/vuejs/core/issues/4344
将自制的Vue 3库导入Vue 3项目时:“未登录TypeError:无法读取null属性(读取'isCE')”
这里提到的解决方案都不起作用.
有人能帮忙吗!
我已经注意到,如果不包括<slot />
,它可以正常工作,但是插槽对于组件来说是至关重要的。
我知道它正在将Vue代码捆绑到构建文件中,但我如何阻止它这样做。
提前谢谢。
发布于 2022-05-03 06:55:07
我也遇到过这个非常令人沮丧的问题。根据这个答案的说法,这是由从多个包导入Vue而不是像您所怀疑的那样只使用一个单例造成的。
想必,您正在使用Vite构建您的消费者应用程序。在这种情况下,在其dedupe
中设置vite.confg.js
选项可以解决这个问题。
resolve: {
dedupe: [
'vue'
]
},
发布于 2022-05-12 10:17:15
我也遇到了这个问题:)问题是您使用的Vue包有两个不同的副本
只要读一下这个,你就会找到答案。对我来说,改变工作空间成纱是解决方案。
发布于 2022-06-07 22:09:55
尝试删除node_modules + yarn.lock,然后重新安装包装(纱线)
https://stackoverflow.com/questions/72036673
复制相似问题