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

Question

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

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

我意识到这个问题已经过时了，但我遇到了这个确切的问题。由于删除 node_modules 不是一个有效的解决方案，这就是实际工作的方法。

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

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

将“vue”移至此处。

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

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

2 回答 2