我在使用ViteJS和NPM为Vue 3构建自定义组件库时遇到了麻烦。我在下面包含了我的问题的基本说明,有人能告诉我我做错了什么吗?或者给我指出正确的方向,我已经在这个问题上卡住了2天:(。
我的文件夹结构:
- 区
- 节点模块
- SRC
- 组件
- Paragraph.vue
- paragraph.js
- .gitignore
- package.json
- README.md
- vite.config.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))
},
},
})
段落.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文件作为插件包含到我的测试Vue项目中。
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
When Importing Self Made Vue 3 Library Into Vue 3 Project: "Uncaught TypeError: Cannot read properties of null (reading 'isCE')"
这里提到的两种解决方案都不起作用。
有人能帮帮忙吗!!!
我已经注意到,如果我排除<slot />
,它工作得很好,但插槽是至关重要的组件。
我知道它将Vue代码捆绑到构建文件中,但我如何阻止它这样做呢?
先谢谢你了。
4条答案
按热度按时间sg2wtvxw1#
我也遇到了这个非常令人沮丧的问题。根据这个答案,这是由于从多个包导入Vue而不是像你怀疑的那样只使用一个单例。
假设您正在使用Vite构建消费者应用程序。在这种情况下,在其
vite.confg.js
中设置dedupe
选项应该可以解决这个问题。qoefvg9y2#
我也遇到过这个问题:)问题是你有两个不同的Vue包副本被使用
只要读一读这篇文章,你就会找到你的答案。对我来说,把工作区改成Yarn是解决方案。
https://github.com/vuejs/core/issues/4344
hm2xizp93#
尝试删除node_modules + yarn.lock然后重新安装软件包(yarn)
btqmn9zl4#
在我的例子中,将“vue”依赖项移动到dev依赖项解决了这个问题。