我正在研究工作中一个新项目的选择。我们正在考虑使用next(或者只是常规的vue 3)并创建一个库来保存我们的共享组件。
我正在尝试进行初始设置，但遇到问题。我按照本教程创建了库并添加了typescript。我创建了一个带有计数器的示例组件并将其导出。
问题是，当我在一个消费项目(无论是下一个项目还是一个普通的vite项目)中从库中导入组件时，该组件看起来好像不是响应性的。它的内部计数器应该在点击时增加，但它没有更新。控制台中没有错误或警告。
另一个问题是它的CSS没有被应用。它在组件中定义了一些基本的样式，但是不可见。我在这里创建了一个带有安装说明的最小复制repo: https://github.com/drekembe/vite-reproduction-2342
我试着搜索类似的问题或自己调试，但我没有得到任何地方。
感谢您的帮助。
我今天在我的包中遇到了这个问题，最后，我发现真正的罪魁祸首是我们在本地测试的包中的node_module。如果您通过npm link安装本地包，或者直接使用"components": "../components"这样的文件夹路径安装，您的node_module将看起来像:
node_modules
|
--components
|
--node_modules <-- the culprit here
你的包将与自己的node_module一起发货，并且在该模块中有一个独立于你在应用程序中使用的vue包的vue包。所以你的组件不会像预期的那样工作。
要测试它，只需删除node_modules/components/node_modules和虚拟缓存node_modules/.vite，然后再次运行yarn dev。您将看到您的组件现在可以正常工作了。
解决方案:
- 在你的包文件夹
components中运行npm pack来打包你的包。它将为您的包创建一个tarball。输出是components文件夹下的components-0.0.0.tgz文件。这是最重要的部分，因为npm pack将创建一个包，它与你要发布到npm注册表的包相似。现在，在您的测试项目my-vite-app中，将您的包添加到package.json:"components": "file:../components/components-0.0.0.tgz" - 运行
yarn安装包，运行yarn dev运行应用程序，看看你的组件是否工作。 - 每次你对你的包做了改变，不要忘记重新打包并重新安装它。你可能想增加你的包版本来使yarn缓存无效
在components文件夹中运行:
yarn build
然后运行:
yarn link
在my-vite-app文件夹中运行:
yarn link "components"
在maint.ts中导入style:
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')