从本地vite导入的组件不更新

Question

我正在研究一个新项目的选择。我们正在考虑使用NUXT（或只是常规VUE 3），并创建一个库，我们将保留共享组件。

我正在尝试进行初始设置，但是有问题。我关注此教程以创建库和typescript。我创建了一个带有计数器的示例组件并导出了它。

问题在于，当我在消费项目中从库中导入组件（无论是NUXT项目还是Vanilla Vite Vue项目）时，该组件看起来似乎没有反应性。单击时，它的内部计数器应该增加，但没有更新。控制台中没有错误或警告。

另一个问题是，它的CSS没有被应用。它具有组件中定义的一些基本样式，但不可见。我在此处使用设置说明创建了一个最小的复制回购： https：//github.com/drekembe/ Vite-Reproduction-2342

我尝试搜索类似问题或自己调试，但我还没有到达任何地方。

任何帮助将不胜感激。

Answer 1

今天我的软件包遇到了这个问题，最后，我发现真正的罪魁祸首是我们本地测试的软件包内的node_module。如果您通过npm链接安装本地软件包或直接使用文件夹路径安装，例如“组件”：“ ../组件”，您的node_module将看起来像：

node_modules
  |
   --components
      |
       --node_modules <-- the culprit here

您的软件包将使用其自己的node_module在该模块内部发货。因此，您的组件无法正常工作。

要测试它，只需删除node_modules/components/node_modules，而Vite Cache node_modules/.vite然后再次运行yarn dev。您将看到您的组件现在正常工作。

解决方案：

• 在您的软件包文件夹中组件运行npm pack打包软件包。它将为软件包创建tarball 。输出是组件-0.0.0.tgz 组件文件夹中的文件。这是最重要的部分，因为npm pack将创建一包与您将发布到NPM注册表相似的软件包。
• 现在在您的测试项目my-vite-app将您的软件包添加到package.json：“组件”：“文件：../组件/components- 0.0.0.tgz“
• 运行YARN安装软件包和YARN DEV运行该应用程序，看看您的组件是否有效。
• 每当您对包装进行更改时，请不要忘记再次打包包装并重新安装它。您可能想增加包装版本以使纱线缓存无效

Answer 2

在您的组件中文件夹运行：

yarn build

然后运行：

yarn link

in my-vite-app文件夹运行：

 yarn link "components"

在naver.ts.ts中导入样式：

import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')