在 vue 3 中从另一个本地项目导入和显示组件

Posted 2023-03-16

【中文标题】在 vue 3 中从另一个本地项目导入和显示组件

【英文标题】：Importing and displaying component from another local project in vue 3

【发布时间】：2021-02-23 15:10:51

【问题描述】：

我正在尝试使用 vue3 和基于 primevue 的 typescript 创建一个库（vue3-lib），它将用于其他一些项目（如 vue3-project）。运行 vue3-lib 时，一切都按预期工作，但是当我运行（npm run serve）vue3-project 时，我无法显示从 vue3-lib 导入的组件（我收到“[Vue warn]: Invalid VNode 类型：访问 Prime 测试视图时的符号（片段）（符号）”。 我刚刚开始 vue3 和整个生态系统，所以任何建议都会有所帮助。谢谢！

Github： https://github.com/aitudor/vue3-lib https://github.com/aitudor/vue3-project

【问题讨论】：

问题可能源于用于启动应用程序的 vue 包的两个独立实例及其依赖项之一。 Vue 3 使用 Symbols 进行一些渲染工作，尽管它们 看起来 相同（即在调试时，Symbol(Fragment) 似乎与 Symbol(Fragment) 进行了评估，可以预期匹配），它们是不是当它们来自两个不同的脚本时。很遗憾，我面临与您相同的问题，但我没有解决方案。

您解决了这个问题吗？面临同样的错误，没有任何线索。 :(

我还没有找到解决这个问题的方法。我所做的是使用 git submodule 并将 vue3-lib 添加为 vue3-project 中的 git 子模块。这当然有一些缺点，但这就是我所在的地方。当我有更多时间时，我会尝试找出为什么这不起作用。感谢所有回复。

我仍然不知道为什么会出现这个问题。我确实发现使用render() 函数而不是使用<template> 作为标记来构建组件库似乎可以让事情再次正常运行。

【参考方案1】：

// main.js
import * as vue from "vue";
window.Vue = vue;

【讨论】：

嗨，欢迎来到 SO。请不要只回答代码。在这种情况下，您可能会解释 OP 收到错误的原因以及如何解决它。