使用 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) 可能会干扰我的副本。我还没弄清楚如何将我的零钱推到队列的后面。

我还尝试过使用 a test.html，还尝试在我的文件上放置不同的扩展名.txt，并在将其复制回.html. 大多数时候我都会犯错误。

有没有一种相对直接的方法来利用 的vue-cli-serve命令build并将 an 复制index.html到文件夹？

我使用的构建命令是：

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

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

这是https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScriptvue inspect的输出 ，这是我的当前内容： https: //jsfiddle.net/websiter/fou3y4zc/embedded/js/dark /#JavaScript，其中和是解决/窥探上述问题的尝试。
vue.config.jsconfigWebpackchainWebpack

我正在使用@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 构建脚本感兴趣。