【vue chunk-vendors 报错 xxx is not defined 遇到的坑】

2023-12-01 22:30

本文主要是介绍【vue chunk-vendors 报错 xxx is not defined 遇到的坑】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue chunk-vendors 报错 xxx is not defined 遇到的坑

    • 背景
    • 错误的示范
    • 正确的示范
    • 总结

导航

    • 背景
    • 错误的示范
    • 正确的示范
    • 总结

背景

本人后端 Java 攻城狮一枚,属于贼菜的那种迫于生活压力也要写前端目前最多的就是vue 的项目,
但是在茫茫学海中知识点如此之多故并没有系统性的学习相关vue 教程数据依葫芦画瓢的模式勉强前行。

大巧不巧 本地运行项目一切顺畅,欣喜若狂终于搞定了开始打包准备发布,一看打包成功就感觉稳了。
一边把打包后的代码上传服务器一边收拾东西准备收工,但是噩耗也随之而来 《chunk-vendors 报错 xxx is not defined》!!!

错误的示范

以为多年的开发摸鱼经验一眼看去就知道八九不离十 肯定是没有声明变量,具体报错如图
请添加图片描述
于是乎我就去工程里面全局了一把当我看到结果的时候就隐隐觉得有点不对了如图
请添加图片描述
也不对啊项目里面没有但是服务器上就报错txt 于是乎僵住了 这个 chunk-vendors 是压缩之后的代码可阅读性基本为0 对于这个问题硬是找了半天都没解决到。
最后问了各种前端程序员无果后请教了资深大神,大神出马一下解决问题

正确的示范

跟上面的前面两部操作步骤相同,当在项目中找不到txt 的时候,且本地运行打包都正常就服务器出问题那么打开vue 的源码映射功能直接服务器调试即可

module.exports = {//如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。productionSourceMap: true,   
}

于是乎之前服务器代码报错的信息就变成了可阅读的错误信息根据错误提示找到对应的地方 。
请添加图片描述
最终的原因就是 cos-js-sdk-v5 这个包的版本太低了针对这个包重新install 升级就解决了这个问题 升级后该方法如图
请添加图片描述
当然解决完问题记得把参数改回去其一是构建速度快,其二是代码保护

总结

诸如此类 chunk-vendors 报错 xxx is not defined 的vue 项目解决思路问题 都可以参考以上的方法快速定位问题。

再根据具体的问题找解决方法,这也是给自己的一个教训。换句话说出来混早晚是要换的前端的系统性学习看来是需要提上日程了。

这篇关于【vue chunk-vendors 报错 xxx is not defined 遇到的坑】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/442924

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法:删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错,是

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路