vue3 vite sourcemap控制台报错位置错误问题, 完美解决

已于 2023-08-24 14:01:16 修改
阅读量8.8k 收藏 10
点赞数 18
分类专栏： 前端项目运行报错及解决方案 文章标签： 前端
于 2023-07-19 11:02:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojun19900715/article/details/131803326
版权

在使用vue3 + vite 进行项目开发时, 控制台报错位置不准问题深受其烦, 在阅读大量文章后对此问题的理解反馈给大家,希望能帮助更多的人解决此问题

遇到的问题如下图:
报错位置
在这里插入图片描述
定位到的位置在这里插入图片描述

解决办法: 打开控制台点击设置
在这里插入图片描述
将 Enable JavaScript source maps 选中状态改变成非选中状态即可
在这里插入图片描述

关闭设置后刷新, 点击位置点击进入已经能够跳到对应的报错位置, 但在文件中查找位置依然可能不对, 原因是返回的位置是经过vite编译过的对应单独的map.js文件的位置,并不是开发.vue文件报错所在的行数, 解决该问题, 建议将
script标签包含部分提升到.vue文件的最前面即可, 这样无论是通过debugger跳转还是直接找该文件的报错位置都是准确的

最后希望能帮助大家解决该问题, 创作不易, 请留下您的点赞,万分感谢

vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
Vite 基本配置及原理
weixin_43443341的博客
11-02 7621
Vite 基本配置及原理
生产上的问题你还不会用 sourcemap 定位吗？
程序员成长指北
03-29 809
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言上周在群里突然被 @ 要我查看生产上出现的问题，由于这个项目比较老 (React15)，既没有埋点也没有接入错误监控，于是会得到如下的这样一个提示信息（以下错误是本地模拟的实际生产效果）：当你想要直接点击链接定位时，就会看到如下的形式：这怎么说呢？不能说一模一样，只能说毫不相关（表面上）！针对...
vite部署显示源码配置
最新发布
猿脑2.0的博客
10-10 700
在Vite项目中，打包展示源码通常意味着你希望在构建后能够保留源代码的格式和可读性，以便于调试或展示。它们允许你在浏览器的开发者工具中查看和调试原始源代码，而不是压缩后的代码。如果你只是想在部署时展示源代码，而不是在生产环境中使用压缩后的代码，你可以考虑将原始代码作为静态资源一起部署。请注意，在生产环境中启用Source Maps可能会增加构建后的文件大小，因为它们需要额外的映射文件。虽然Vite在生产构建中会压缩和混淆代码，但你可以通过一些额外的工具或步骤来保留或还原源代码的格式。
vite build vue3项目如何配置开启sourcemap
徐同保的专栏
04-25 4710
如果使用0x对node项目进行性能分析
【Vue3】vite配置css 的sourceMap ,以及文件引用配置别名
任磊
05-25 7073
Vite 2.9配置浏览器加载 CSS 源映射
【前端工程化】到底什么是sourceMap
qq_17335549的博客
11-30 604
【前端工程化】到底什么是sourceMap
生产上的问题你不会用 sourcemap 定位吗？
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-07 1319
前言欢迎关注《熊的猫》公众号，本公众号会定期分享技术干货！上周在群里突然被 @ 要我查看生产上出现的问题，由于这个项目比较老 (React15)，既没有埋点也没有接入错误监控，于是会得到如下的这样一个提示信息（以下错误是本地模拟的实际生产效果）：当你想要直接点击链接定位时，就会看到如下的形式：这怎么说呢？不能说一模一样，只能说毫不相关（表面上）！针对老项目再想加入埋点和错误监控可能就比较困难了，特...
vite 常规配置
qq_40510461的博客
05-13 667
vite 常用配置
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
在开发Vue项目时，遇到IE11浏览器白屏并报出`SCRIPT1002: 语法错误`的问题，通常是由于IE11不支持ES6语法导致的。Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些...
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
01-21
今天在项目中使用axios时发现axios.all() 方法可以执行但是控制台报错，后来在论坛中看到是由于axios.all() 方法并没有挂载到 axios对象上，需要我们手动去添加 == 只需要在你封装的axios文件里加入 == instance....
vite-sourcemap-repro
03-20
vite-sourcemap-repro
基于Vue3+Vite的商品管理系统可视化页面源码.zip
08-21
基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品...
vue 解决循环引用组件报错的问题
10-18
本文将深入探讨Vue中的循环引用问题及其解决方案。 首先，我们要理解为什么会出现这个问题。在Vue中，当我们尝试在一个组件的模板中使用另一个组件时，Vue需要确保被引用的组件已经注册。常规情况下，我们通过局部...
Vite中如何使用css的源文件映射
weixin_46769087的博客
12-16 633
如果我们采用诸如webpack或vite的构建工具开发项目，一定对这个单词比较熟悉。即源代码映射，开启后，即使在开发环境也可以映射出源代码的位置。在vite项目中，css也有与之类似的属性。
vite常用配置
weixin_63443072的博客
10-16 7551
root 是项目根路径，可以是绝对路径，一般配合fs.strict来限制访问root以外的路径。
Vite构建工具的理解与使用
qq_50583932的博客
06-06 921
Vite 的自定义插件需要实现name和apply两个属性，其中name是插件的名称，apply是插件的逻辑。return {// 自定义插件的逻辑 return {} , };在上面的示例中，我们定义了一个名为myPlugin的自定义插件，它实现了transform方法，用于处理模块的代码。transformcode和id。其中，code是模块的代码，id是模块的路径。transform方法需要返回一个包含code和map属性的对象，code属性是处理后的代码，map属性是代码的。
vue3 vite sourcemap控制台位置不准确问题
黄彪博客
09-27 381
文章目录参考解决办法 参考 vue3 vite sourcemap控制台报错位置错误问题, 完美解决 解决办法
使用 sourcemap 定位生产环境问题（2种方案）
程序员成长指北
06-10 1181
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群文章转载于稀土掘金——敲代码的彭于晏前言学会调试线上代码是每个前端都必须学会的技能，本篇将介绍使用两种方式调试线上环境中的代码。先说说为什么要学会调试线上环境？大部分情况下，遇到线上bug时，我们可以在本地启动，然后找到对应模块，复现出bug，最后进行修改。但也有例外的情况，例如内外网连接的两...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值