为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块

Question

我有一个项目结构，如：

.
+-- Common
|   +-- MyCommonVueComponent.Vue
+-- MainProject
|   +-- webpack.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src

当我从控制台构建时，webpack 没有抱怨，因为对于从 Common 导入到 MainProject 的组件，它似乎具有指向 node_modules 文件夹的正确路径。当我尝试在浏览器中调试 Vue.js 应用程序时，我收到以下错误：

../Common/MyCommonVueComponent.Vue
Module not found: Error: Can't resolve 'vue-hot-reload-api' in 'D:\Projects\Cb\CommonVue'

我已经添加：

resolveLoader: {
        modules: [path.resolve(__dirname, './node_modules')],
    },

在控制台中运行 webpack 时，这似乎确实解决了路径问题，但在浏览器中调试时却没有。任何帮助表示赞赏。希望已经设置了类似项目结构的人可以有所启发！

Answer 1

• Vue-cli：v3.11.0
• 网页包：v4.40.2
• 通天塔：7.6.0
• 节点：v10.16.3

今晚我刚刚遇到了类似的情况，我想将一些自定义库移出到外部共享 lib 目录中以进行敏捷开发和模拟测试。大约两周前，我刚刚开始学习 Vue/webpack 生态系统，我可以肯定地说，这是一次冒险，webpack 是一头令人畏惧的野兽，它需要弄清楚所有必须正确对齐的神秘旋钮和按钮。

./devel  (webpack alias: TTlib)
+-- lib
|   +-- widget.js
|   +-- frobinator.js
|   +-- suckolux3000.js
+-- share (suckolux3000.js taps into this directory)
|   +-- imgs
|   +-- icons
|   |   +-- img
|   |   +-- svg
+-- MainProject
|   +-- vue.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src
+-- TestProject
|   +-- vue.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src

我关心的是确保 webpack HMR 能够工作，我可以说你已经很接近了，但还不够远。幸运的是，修复非常简单。

以下是我的vue.config.js补充：

./devel  (webpack alias: TTlib)
+-- lib
|   +-- widget.js
|   +-- frobinator.js
|   +-- suckolux3000.js
+-- share (suckolux3000.js taps into this directory)
|   +-- imgs
|   +-- icons
|   |   +-- img
|   |   +-- svg
+-- MainProject
|   +-- vue.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src
+-- TestProject
|   +-- vue.config.js
|   +-- package.json
|   +-- node_modules
|   +-- src

现在，在我的任何 *Project 组件中，我可以使用：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'TTlib': '/devel/lib'
      },
      modules: ['/devel/lib']
    },
    resolveLoader: {
      modules: ['/devel/lib']
    }
  }
};

现在，如果我编辑任何项目或（外部）lib 文件，webpack HMR 将启动并刷新正在运行的“yarnserve”守护进程并发出我所做的更改。

希望有帮助！