gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:50:47 25 4
gpt4 key购买 nike

我的项目结构如下:

.
+-- 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 时的路径问题,但在浏览器中调试时却没有。任何帮助表示赞赏。希望设置了类似项目结构的人可以阐明一些问题!

最佳答案

  • Vue-cli: v3.11.0
  • 网络包:v4.40.2
  • 巴别塔:7.6.0
  • 节点: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']
}
}
};

现在,在我的任何 *Project 组件中,我可以使用:

import frobinator from 'TTlib/frobinator'

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

希望对您有所帮助!

关于webpack - 为 webpack HMR Vue.js 包含来自外部项目文件夹的可导入模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51643092/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com