我在使用 ViteJS 和 NPM 为 Vue 3 构建自定义组件库时遇到问题。我在下面提供了我的问题的基本说明，有人可以告诉我我做错了什么或指出我正确的方向吗，我已经在这个问题上坚持了两天了:(。
我的文件夹结构：
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);
},
};
段落.vue
<script setup>
console.log('Test');
</script>
<template>
<p class="paragraph">
<slot />
</p>
</template>
<style>
.paragraph
{
color: black;
}
</style>
当我运行
npm run buildimport { 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 项目时：“Uncaught TypeError: Cannot read properties of null (reading 'isCE')”
这里提到的解决方案都不起作用。
有人可以帮忙吗！！！
我注意到，如果我排除
<slot />我知道它将 Vue 代码捆绑到构建文件中，但我如何阻止它这样做。
提前致谢。
我也遇到过这个非常令人沮丧的问题。根据这个答案，这是由于从多个包导入 Vue 而不是像您怀疑的那样仅使用一个单例引起的。
想必您正在使用 Vite 构建您的消费者应用程序。在这种情况下，在其
dedupevite.confg.jsresolve: {
dedupe: [
'vue'
]
},
指出库模式文档。确保您的
vite.config.js build: {
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'lib/main.js'),
name: 'MyLib',
// the proper extensions will be added
fileName: 'my-lib',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
我也遇到过这个问题:)问题是你有两个不同的正在使用的 Vue 包副本
只要阅读本文，您就会找到答案。对我来说，将工作空间更改为纱线就是解决方案。
尝试删除node_modules+yarn.lock 然后重新安装包（yarn）
就我而言，将“vue”依赖项移至开发依赖项解决了问题。
问题是多个 vue 实例加载了不同的版本。
就我的错误而言，问题是模块解析加载了依赖项，例如，直接项目依赖项中的 Vue 版本是 3.3.7。 另一个包（例如。
public-ui-fw在这种情况下，正在安装包管理器。
package.json
node_modules/
vue/
package.json # this is version 3.3.7
public-ui-fw/
package.json
node_modules/
vue/
package.json # this is version 3.3.6
所以
public-ui-fw解决方案，
我强制包管理器在所有传递依赖项中仅安装 1 个版本。
取决于您使用的包管理器，请参考：