vue-cli3 多入口文件 配置cdn报错

最新推荐文章于 2025-07-14 23:03:09 发布
原创 最新推荐文章于 2025-07-14 23:03:09 发布 · 990 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #vue-cli3 #webpack

本文详细介绍了在Vue项目中遇到的因多入口配置导致的CDN引用错误，以及如何针对性地解决该问题。提供了一种方案，即在生产环境中通过条件判断为特定页面配置CDN，并给出了当所有页面都需要配置CDN时的解决方案链接。对于前端开发者来说，这是一篇关于优化项目构建和资源引用的重要参考资料。

问题：报错Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘html’).use() …

原因：在pages中配置了多入口，导致配置cdn时无法找到唯一页面

  pages: {
    index:{
        entry:  "src/main.js", 
    },
    pay:{
      entry:'public/pay/pay.js',
    }
  }

解决办法：

1、如果仅需某个页面配置 cdn：

if (isProd) {
//下面的'html-index'中的index和上面pages的key值对应
      config.plugin('html-index')
        .tap(args => {
          args[0].cdn = assetsCDN
          return args
        })
    }

2、如果每个页面都需要配置cdn，则参考下面这篇（很详细哒）

https://blog.youkuaiyun.com/qq_18149661/article/details/107233451

Vue - Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘html‘).use(＜
🏆 前端领域优质创作者
08-30 3839
Vue Cli 配置多入口报错解决办法 Cannot call .tap() on a plugin that has not yet been defined，vue脚手架使用 html-webpack-plugin插件，npm install出现以下错误，配置html-webpack-plugin，Vue Cli 构建多页面应用，Vue运行无故报错解决，vue2项目报错，vue3项目报错，webpack项目报错，vue-cli项目报错，如何解决这个问题，webpack打包报错，项目做多入口, 默认入口为
Error Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘html‘).use(＜Plugin
m0_54849873的博客
03-08 3880
webpack打包报错如下： Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(``'html'``).use(<Plugin>) first. 解决方法： 修改vue.config.js原配置： if (isProd) { config .plugin("html") .tap((args) => { args
《Webpack5 升级》- Vue2.x 项目 Webpack 4 升级 5（半自动升级）
前端技术
11-03 3136
webpack4升级5 （半自动升级）
Vue Cli 配置多入口报错解决办法 Cannot call .tap() on a plugin that has not yet been defined
前端一线搬运工的博客
05-12 2万+
项目做多入口, 默认入口为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", .
vue：引入外部cdn报错 ‘XXX is not defined’ 及事件处理办法
热门推荐
mosowe
04-30 2万+
框架：vue-cli（vue脚手架） 例：以cdn引入腾讯防水墙为例 前因：在html的head中引入外部cdn链接， 在vue文件中直接使用，如图 结果：如图报错 解决办法： 1. 在index.html中的head中引入， 2.在webpack.base.conf.js中配置 module.exports = { externals: { Tencen...
Vue-CLI 4.0配置CDN的方法
xinyuandu的博客
10-23 1788
Vue-CLI 4.0配置CDN的方法 之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助 创建vue.config.js 创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。 找到CDN的路径 如果要引用cdn，首先还是要找到CDN路径，这个是
vue-cli webpack配置分析 - chenBright - SegmentFault 思否
2401_84438488的博客
04-29 897
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了@param {Array} loaders loader名称数组@return {String|Object} ExtractTextPlugin对象或loader字符串*/// 例如，sass?// 在?号前加上“-loader”})
vue-cli4打包最强优化（10M变300kb）
m0_70275087的博客
05-04 1418
//配置alias别名后 import Home from ‘views/Home.vue’ //也可以这么写 import Home from ‘@/views/Home.vue’ [](()项目结束后打包前webpack配置 ==================================================================================== 目的： 提高打包速度 减小项目体积、提高首屏加载速度 提高用户体验（骨架屏） 打包前必做 项目开
vue-cli4打包优化（webpack优化）
weixin_46057188的博客
01-11 2150
项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件 配置proxy跨域 使用vue-cli开发项目，在本地开发环境中，如果遇到跨域问题，可以通过配置peoxy的方式解决跨域问题 module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 h
Vue Cli 配置多入口后, plugin 异常问题处理
qq_35574191的博客
08-01 9783
使用 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 preloa
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘preload‘).use(＜Plu
2301_80587300的博客
08-16 2818
文章可能会有用词不规范的地方希望理解（因为有的东西我不知道要叫啥），有错误的地方还望指出~ 本文几乎都是教操作 没讲原理，其实我能讲出大概原理，但是！看我上面的截图，黄色框框住的东西就是我们要写在下图红框的，你的界面有几个黄框的东西就写几个这样配置（记住是写在chainWebpack(config){ } 里面的！但是可能有的小伙伴没看过那几篇文章就来看我这篇，所以我决定写总结版的。然后我的报错就解决了。
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘html‘).use(＜Plugin
lyn1772671980的博客
08-22 1万+
webpack打包报错如下： Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first. 解决方法： 修改vue.config.js原配置： if (isProd) { config .plugin("html") .tap((args) => { arg
vue-element-admin 报错。
f6174的博客
06-07 637
修改了preload 为preload-index.还是不行。
Vue运行无故报错解决transpileDependencies.map is not a function或Call plugin(‘preload‘).use(＜Plugin＞) first.
Sidney_Jack_1101的博客
11-06 1万+
在准备使用vue-element-admin开发时，遇到了运行npm run dev无故报错在vue.config.js里添加了transpileDependencies:[]配置后依然无法解决，报出如下错误随后多次尝试重新进行npm install，修改plugin等方法，并未解决，确定与代码本身无关。
Cannot call .tap()on a plugin that has not yet been defined, Call plugin(‘html‘).use(＜Plugin＞) first
最新发布
2401_89806660的博客
07-14 941
确保在修改插件之前，它已经被正确加载。例如，某些插件可能在其他配置文件或预设中被注册，你需要确保这些依赖已正确引入。通常出现在使用 Webpack 配置时，特别是当你尝试修改一个尚未注册的插件时。具体来说，错误提示中的。版本与 Webpack 兼容。某些插件版本可能需要不同的配置方式。如果你在插件注册前就尝试修改它，会触发此错误。错误，并正确配置你的 Webpack 插件。确认你使用的插件名称与注册时一致。通过以上步骤，你应该能够解决。在修改插件之前，必须先使用。），也会导致此错误。
Call plugin(‘preload‘ ).use(＜Plugin＞) first.
sophietumeng的博客
03-04 2540
ERROR Error all .tap() on a plugin that has not yet been defined.Call plugin('preload' ).use() first.
require is not defined vue3报错
07-25
`require is not defined` 错误通常出现在使用 ES6 模块化系统（如 `import ... from &#39;...&#39;` 或 `export`) 的环境里，并尝试在一个使用 CommonJS 规则（通常通过 `require()` 函数引入模块）的环境中运行代码的时候。 ### Vue.js 中的上下文 Vue.js 本身支持两种不同的脚本加载模式： 1. **运行时编译**（仅支持 CommonJS 和 ESM） 2. **模板编译**（仅支持字符串模板） ### 报错原因 当试图在一个只支持 CommonJS 的环境下使用 ESM （例如 Node.js 的默认模块系统）时，会触发上述错误。这是因为 `require` 是用于加载 CommonJS 模块的语法，而在 ESM 环境下应该使用 `import` 关键字。 ### 解决方案 如果你是在开发 Vue 应用程序并且遇到 `require is not defined` 错误，那么需要检查并确认你使用的文件和导入语法是否匹配当前的工作环境： #### 对于使用 Vue CLI 创建的项目： 在大部分情况下，如果你正在使用 Vue CLI 构建的应用，它会自动处理这两种模块系统的差异。你需要做的只是确保所有引入的模块都使用了正确的语法。例如： - 使用 ESM 导入 Vue 实例和其他依赖： ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; const app = createApp(App); app.mount(&#39;#app&#39;); ``` - 如果外部库使用了 CommonJS，你需要在项目根目录的 `package.json` 文件中添加对它的依赖，并配置相应的 `main` 属性。 ```json "dependencies": { //... "your-library": "file:path/to/library" } ``` 同时，在项目的入口文件或脚本中，确保引入的是正确版本的 Vue： ```javascript // index.js or main.js import Vue from &#39;vue/dist/vue.esm-bundler&#39;; // 或者如果你从源码构建： import Vue from &#39;https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser&#39; ``` #### 针对特定场景 如果以上步骤都无法解决问题，可能是因为某个特定库的内部实现问题或者是 Vue 特定版本的兼容性问题。在这种情况下： 1. 更新到最新版的 Vue 和相关的依赖。 2. 查阅官方文档或社区讨论了解是否有针对特定版本的问题修复或建议。 3. 直接查看该库的源代码或报告给开发者寻求帮助。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值