在 vue-cli 3 项目中使用带有 npm-link 的 vuex store 丢失 $store

Question

我认为这是一个与将存储保存在 npm 链接文件夹中相关的配置问题。

我做了一个 vue-cli 3 项目并得到了“计数器”示例运行ning（来自 https://github.com/vuejs/vuex/tree/dev/examples/counter）
工作： 当我将 store.js 移动到 installed node_modules 包（并更新其导入url) 它继续工作。
中断： 当我将 store.js 移动到 npm linked node_modules 包时，它会编译和开发工具找到商店，但 我得到一个空白屏幕和控制台错误：属性或方法“$store”未在实例上定义但在渲染期间被引用

如果我构建最小化的 js (npm 运行构建)，它也可以与链接包一起正常工作。是否有我缺少的配置设置？

Answer 1

问题原来是链接包有自己的 node_modules 文件夹。我认为这可能导致 webpack 创建 2 个 Vue 实例并将链接包附加到第二个实例。

删除依赖包的节点模块并让 webpack / vue-cli 运行在根级别解决了我的问题。

Answer 2

我意识到这个问题老得离谱，但我运行正是这个问题。由于删除 node_modules 不是有效的解决方案，因此这是实际有效的方法。

在要导入主应用程序的库中，编辑 package.json 文件。您想将 Vue 移动为对等依赖项。

"dependencies": {
    "vue": "^3.0.0" // move this
},

将“vue”移至此处。

"peerDependents": {
    "vue": "^3.0.0"
},

这将导致您的库使用您的主要 vue 应用程序使用的 Vue 实例。正如公认的答案所述，这个问题确实是由每个包加载自己的 Vue 实例引起的。发生此问题是因为反应性绑定到 Vue 实例。由于每个库都有自己的实例，这会导致无法正确跟踪实例之间的反应性。

的 Vuejs git 存储库中找到了解决方案

Using vuex store with npm-link in vue-cli 3 project loses $store