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

• Vue cli:v3.11
• 网页:v4.40.2
• 巴贝尔:7.6.0
• node :v10.16.3

今晚我遇到了一个类似的情况，我想把一些定制库转移到一个外部共享库目录中，用于敏捷开发和模拟测试.大约两周前，我才开始学习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条补充信息:

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

现在，在我的任何*项目组件中，我都可以使用:

import frobinator from 'TTlib/frobinator'

Now if I edit any of the project or (external) lib files, webpack HMR will kick in and refresh the running 'yarn serve' daemon and emit the changes I've made.

希望有帮助！