Vue Cli 配置多入口后, plugin 异常问题处理

使用 vue-admin-template 配置多入口后，执行 vue inspect 出现报错：

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘preload’).use() first.

是因为如下代码报错：

   // it can improve the speed of the first screen, it is recommended to turn on preload
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

preload 是为了提高首屏加载速度，具体可参考:

• 使用 Preload&Prefetch 优化前端页面的资源加载
• prefetch 和 preload 及 webpack 的相关处理

对于出现上述的报错，具体原因还是出在vue-cli 的多入口配置，参考 vue cli 文档， 其中对于 pages 部分有一段提示：

当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项，请确认运行 vue inspect。

注释掉上边报错部分代码并运行vue inspect，果然发现我的项目中有多个相关实例：

[
  'vue-loader',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  // 多入口， 多实例
  'html-index', 
  'html-admin',
  'preload-index',
  'prefetch-index',
  'preload-admin',
  'prefetch-admin',
  'copy'
]

解决办法，可以配置多个 config.plugin，也可以编写函数进行统一处理，由于我这里配置较为简单，就直接采用前者。

Ref:

1. Adding webpack plugin in chainWebpack mode failed
2. How to configure vue-cli 3.0 pages?

支持一下：