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

Posted 2023-02-22

【中文标题】使用 vue-cli-service build --target lib 时，如何在 /dist 文件夹中复制 *.html 文件？

【英文标题】：How can I copy a *.html file in /dist folder when using vue-cli-service build --target lib?

【发布时间】：2020-07-28 18:33:50

【问题描述】：

虽然我显然不是 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 构建，它不会将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 一起使用

【参考方案1】：

我知道这是一个老问题，但我想我会为在 Vue 3 中仍然遇到此问题的任何人添加更多详细信息。

使用以下配置，我能够通过vue 3.0.0、@vue/cli-service 4.5.0、webpack 4.46.0 和copy-webpack-plugin 6.4.1 实现类似的输出：

vue.config.js

const CopyPlugin = require("copy-webpack-plugin");

/**
 * @type import('@vue/cli-service').ProjectOptions
 */
module.exports = 
    chainWebpack: (config) => 
        // Disable HTML Generation.
        config.plugins.delete("html");
        config.plugins.delete("preload");
        config.plugins.delete("prefetch");

        // Copy all contents of the "static" src directory
        // to the destination's root.
        config.plugin("copy").use(CopyPlugin, [
          
            patterns: [ from: "./static", to: "./" ],
          ,
        ]);
    ,
;

npm 脚本：

vue-cli-service build --target lib --inline-vue --name app src/main.js

注意：“inline-vue”参数强制将 Vue 嵌入到包中（请参阅https://cli.vuejs.org/guide/build-targets.html#library）。

【参考方案2】：

我想出了一个解决方法，只需运行 npm i copyfiles -D 并将此位添加到 build 脚本：

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

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

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

【讨论】：

你找到更好的答案了吗？

我已经完成了“vue-cli-service build && cp -avr ../lib/ ../wwwroot/js”，所以我可以复制整个文件夹