虽然我显然不是webpack专家,但我通常会弄清楚/找出需要修改哪些内容才能实现所需的功能。但是,尽管看起来很简单,但我却损失了一天以上的时间:

我想在构建后通过从文件夹复制将index.html添加到构建中。

我尝试将它添加到configureWebpack中的vue.config.js中:

plugins: [
  new CopyPlugin([{
    from: 'deploy',
    to: '/',
    force: true,
    copyUnmodified: true
  }])
]

(deploy文件夹中的唯一文件是此index.html)。

我还尝试了各种版本的chainWebpack(主要从github讨论中选取),试图利用htmlmove-indexcopy这样的插件。但是,我在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-indexhtml)可能会干扰我的副本。我还没有弄清楚如何将我的更改推到队列的后面。

  • 我也尝试过使用test.html,并且还尝试在文件.txt上放置其他扩展名,并在复制文件时将其覆盖,改回.html。大多数情况下,我都会遇到错误。

    有没有一种相对简单的方法可以利用vue-cli-servebuild命令并将其简单地复制到该文件夹​​中?

    我正在使用的生成命令是:
    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.jsconfigWebpack试图解决/窥探上述问题。

    我正在使用chainWebpack@vue/cli 4.2.3

    最佳答案

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

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

    这不是解决问题的正确方法,而是解决之道。但这有效:)。

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

    09-30 13:55
    查看更多