vue.js - 使用 vue-cli-service build --target lib 时，如何复制/dist 文件夹中的 *.html 文件？

Question

虽然我显然不是 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)

到目前为止我想出了什么:

CopyPlugin 要么不起作用，要么对 .html 有异常。文件。

至少有两个插件:( move-index 和 html )可能会干扰我的副本。我还没有弄清楚如何将我的更改推送到队列的后面。

我也试过 test.html我还尝试在我的文件中放置不同的扩展名 .txt并在复制时覆盖它，回到 .html .大多数时候我最终都会出错。

是否有一种相对直接的方式来利用 vue-cli-serve的 build命令并简单地复制一个 index.html到文件夹？

我正在使用的构建命令是:

vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts

请注意这是一个 --target lib build，它不输出 index.html进 dist文件夹，但是一个 demo.html .所以我建议针对 --target lib 测试任何解决方案构建，因为它显然具有与正常构建不同的输出。

这是 vue inspect 的输出: https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript
这是我 vue.config.js 的当前内容: https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript , 其中 configWebpack和 chainWebpack试图解决/窥视上述问题。

我正在使用 @vue/cli 4.2.3和 vue 2.6.11与 webpack 4.42.1

Answer 1

我找到了解决方法，只需运行 npm i copyfiles -D并将此位添加到 build脚本:

 && copyfiles -f ./deploy/* dist/Recommender

这不是问题的正确答案，而是解决问题的方法。但它有效:)。

仍然对如何将其正确链接到 webpack 构建脚本感兴趣。