Vue Cli 配置多入口报错解决办法 Cannot call .tap() on a plugin that has not yet been defined

原创已于 2022-06-29 13:39:47 修改 · 2.4w 阅读

13 ·

CC 4.0 BY-SA版权

转载请注明出处链接, 谢谢合作.

文章标签：

#linq #蓝桥杯 #c#

于 2022-05-12 15:02:23 首次发布

web前端同时被 3 个专栏收录

171 篇文章

订阅专栏

Vue

47 篇文章

订阅专栏

webpack

6 篇文章

订阅专栏

本文探讨了在Vue CLI多入口项目中遇到的preload插件报错，如何通过为每个入口单独配置preload并修复默认入口问题。文章还介绍了配置runtimeChunk以避免运行时错误，并给出了相关解决方案和配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目做多入口, 默认入口为index时启动出现如下报错:

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

错误代码:

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
    },
    qr: {
      entry: "src/qr.main.js",
    },
  },

  chainWebpack(config) {
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
  },
};

解决办法:

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: "src/main.js",
    },
    qr: {
      entry: "src/qr.main.js",
    },
  },

  chainWebpack(config) {
    config.plugin("preload-index").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
    config.plugin("preload-qr").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
  },
};

原因vue cli文档给出了解释:

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

而在百度上流行的添加.use(HtmlWebpackPlugin)的方法是错误的, 他可以运行,但是index默认地址栏隐形入口就失效了.

*** 如果npm run build 时构建失败提示有关runtime报错等等, 解决办法如下:

chainWebpack(config) { 
    // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
    config.optimization.runtimeChunk = {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    };
}

拓展:

vue-cli3中关于prefetch、preload和路由懒加载的研究 - 百度文库

vue.config.js 配置了 pages index 后，config.plugin('html') 无效 - SegmentFault 思否