虽然我显然不是webpack专家,但我通常会弄清楚/找出需要修改哪些内容才能实现所需的功能。但是,尽管看起来很简单,但我却损失了一天以上的时间:
我想在构建后通过从文件夹复制将index.html
添加到构建中。
我尝试将它添加到configureWebpack
中的vue.config.js
中:
plugins: [
new CopyPlugin([{
from: 'deploy',
to: '/',
force: true,
copyUnmodified: true
}])
]
(
deploy
文件夹中的唯一文件是此index.html
)。我还尝试了各种版本的
chainWebpack
(主要从github讨论中选取),试图利用html
,move-index
和copy
这样的插件。但是,我在github上发现的大多数内容都对我不利。甚至不是简单的尝试,在这里我只是尝试点击和控制台似乎不起作用:
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
console.log(args);
return args;
});
},
输出:
Building for production as library (commonjs,umd,umd-min)...[]
ERROR TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)
到目前为止,我发现了什么:
.html
文件异常。 move-index
和html
)可能会干扰我的副本。我还没有弄清楚如何将我的更改推到队列的后面。 我也尝试过使用
test.html
,并且还尝试在文件.txt
上放置其他扩展名,并在复制文件时将其覆盖,改回.html
。大多数情况下,我都会遇到错误。有没有一种相对简单的方法可以利用
vue-cli-serve
的build
命令并将其简单地复制到该文件夹中?我正在使用的生成命令是:
vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts
请注意,这是一个
index.html
构建,它不会将--target lib
输出到index.html
文件夹中,而是输出dist
。因此,我建议您针对demo.html
构建测试任何解决方案,因为它显然具有与正常构建不同的输出。这是
--target lib
的输出:https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript这是我的
vue inspect
的当前内容:https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript,其中vue.config.js
和configWebpack
试图解决/窥探上述问题。我正在使用
chainWebpack
和@vue/cli 4.2.3
最佳答案
我想出了一种解决方法,只需运行npm i copyfiles -D
并将此位添加到build
脚本中:
&& copyfiles -f ./deploy/* dist/Recommender
这不是解决问题的正确方法,而是解决之道。但这有效:)。
仍然对如何将其正确链接到webpack构建脚本感兴趣。