Vue CLI 可以通过在 vue.config.js 文件下配置 pages 进行多入口打包配置，实现多页面应用开发。

多页面模式下如果要修改插件配置，可能会出现一些问题，常见的就是 preload-webpack-plugin 插件。

配置示例：

// vue.config.js
module.exports = {
  pages: {
    pc: {/*...*/},
    h5: {/*...*/}
  },
  chainWebpack(config) {
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        //...
      }
    ]);
  },
  // ...
}

这样打包的时候会报错：

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.

原因是 config.plugin("preload") 并没有获取到名为 preload 的插件实例。

官方提示：

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

删除了插件配置，使用 vue inspect 查看 webpack 配置，原来多页面模式下，Vue Cli 分别配置了与页面相同数量的插件配置：

{
  plugins: [
    //...
    // 2 个 html-webpack-plugin 配置
    /* config.plugin('html-h5') */
    new HtmlWebpackPlugin(/*...*/),
    /* config.plugin('html-pc') */
    new HtmlWebpackPlugin(/*...*/)
    
    // 2 个 preload-webpack-plugin 的 preload 配置
    /* config.plugin('preload-h5') */
    new PreloadPlugin({rel: 'preload',/*...*/})
    /* config.plugin('preload-pc') */
    new PreloadPlugin({rel: 'preload',/*...*/})

    // 2 个 preload-webpack-plugin 的 prefetch 配置
    /* config.plugin('preload-h5') */
    new PreloadPlugin({rel: 'prefetch',/*...*/})
    /* config.plugin('preload-pc') */
    new PreloadPlugin({rel: 'prefetch',/*...*/})
  ]
}

注释中也标注了获取插件实例的标识是 preload-h5 和 preload-pc，而不是 preload。

所以只需使用新的标识进行配置即可：

// vue.config.js
const pages = {
    pc: {/*...*/},
    h5: {/*...*/}
}
module.exports = {
  pages: pages,
  chainWebpack(config) {
    Objects.keys(pages).forEach(name => {
      config.plugin(`preload-${name}`).tap(() => [
        {
          rel: "preload",
          // ...
        }
      })
    ]);
  },
  // ...
}