vue项目之source-map设置

最新推荐文章于 2025-11-05 11:04:14 发布
原创 最新推荐文章于 2025-11-05 11:04:14 发布 · 1.2w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

当项目遇到错误时，源码位置的错误信息往往不够准确，这为debug带来了不便。本文介绍如何通过合理设置source-map来提高debug的准确性，帮助开发者更高效地定位并解决问题。

问题：项目报错的时候打印的错误信息是源码位置，不准确，设置source-map以提高debug的准确度

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行vite项目报错：await import(‘source-map-support‘).then((r) =＞ r.default.install())
to_the_Future的博客
10-07 5559
项目实现屏幕截图功能。
vue-baidu-map 离线地图制作（不需要修改组件代码）
weixin_44000275的博客
12-02 6403
前言 最近做了一个地图项目，用的技术是vue-baidu-map，临近收尾的时候被告知要做离线版本，真的憋屈。而网上近乎所有的技术博客都是对于原生地图api的，对于vue-baidu-map这个组件的技术博客是没有的（我没找到），这里记一下，供之后的参考。 技术 vue-baidu-map 实现步骤 1、安装vue-baidu-map npm install vue-baidu-map --save 2、全局或局部使用（这里展示局部使用的） 图中箭头所指为百度api的秘钥 3、下载百度api的js文件
vue之sourcemap
我心坚持
11-01 5422
在前端项目投入生产环境之前，需要对js代码进行压缩，从而减小代码体积，提高运行效率。例如压缩后的代码：代码压缩之后就会压缩在一起变成一行代码，变量被替换成没有任何意义的名字，空行和注释都被剔除。当你进行bug调试的时候，就找不到头绪。这时就需要用到sourcemap了，sourcemap是一个信息文件，里面存储这你未压缩之前代码的位置信息。当你出错调试的时候，调试工具就会根据sourcemap记录的位置信息，直接显示未压缩前的代码。webpack默认开启sourcemap。
vite-sourcemap-repro
03-20
vite-sourcemap-repro
前端项目中关闭 sourcemap
最新发布
前端金牌摸鱼达人
11-05 525
前端项目中关闭 sourcemap
【Vue】1-5、Source Map
秋玄的博客
01-27 1012
webpack Source Map
Vue中SourceMap的使用方法详解
青春木鱼的博客
04-11 6771
SourceMap是一种映射文件，它可以将编译后的代码映射回原始的源代码。在Vue开发中，我们通常会将Vue组件的单文件(.vue)编译成JavaScript文件，使用SourceMap可以将编译后的JavaScript代码映射回原始的Vue组件代码，方便我们进行调试。
调试的vue3.5源码 source-map方式怎么弄
09-11
| 无`webpack://vue-core/`路径 | 检查`pnpm link`是否成功+Vue构建时`--sourcemap`参数[^1] | | 断点不生效 | 清除浏览器缓存 + 硬刷新(Ctrl+Shift+R) | | 映射路径错误 | 在开发者工具→Sources→Overrides中修正...
vue2-source-code-guide:读取vue.js 2.6版源代码的演示-vue source code
03-24
从vue官方拷贝来的2.6正式版，在vue2.6中开启sourceMap， // 目录：vue-2.6\scripts\config.js // line 241: sourceMap: true 运行npm run dev，动态打包开发版。 演示文件夹 demo文件夹是业务代码，引用了vue2.6...
vue-waterfall-source-code:学习vue-waterfall源代码-vue source code
03-24
Vue瀑布 Vue.js的瀑布式布局组件。 分支与Vue 1兼容。 演示版 安装 npm install --save vue-waterfall 用法 Vue-waterfall是一个模块，可以在CommonJS和AMD模块化环境中用作模块。 在非模块化环境中， Waterfall将...
本地项目 怎么通过 vue源码source-map的方式进行 vue源码调试，具体步骤全列出来
09-11
在项目的配置文件（vue.config.js）中设置`devtool: 'source-map'`。 2. 重新运行项目，在浏览器开发者工具中，展开webpack://目录，找到node_modules/vue，即可看到Vue的源码文件（以.esm.js结尾的文件）。 ...
vue----sourceMap
weixin_44235759的博客
11-01 725
vue使用source map调试
furenqiang的博客
04-28 2949
效果就是控制台报错行数和源码行数完全一致。
vue source-map设置，@符号使用
yc_1314的博客
10-03 1245
Source Map Source Map 是一个信息文件，里面存储着报错的位置信息，只要有了它，出错的时候，可以直接定位到开发时的原始代码，而不是压缩转换后的代码。极大的方便我们测试。 加粗样式
vue源码分析系列:用sourcemap调试源码
开心大表哥
06-12 1万+
由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。 安装vue（mac机) 1.在GitHub上克隆官方的vue-地址 2.安装依赖npm install 修改vue项目 1.在package.json script dev 增加--sourcemap指令 "dev": "rollup -w -c scripts/config.js --environment TARGE...
Vue——11- webpack保姆级教程02——source-map、oneOf、externals、树摇技术、安装jQuery、 对css进行打包压缩以及 code split（代码分割）
NanChen的博客
11-04 1382
目录 一、source-map source-map查错 ​​二、oneOf 三、安装jQuery插件并对jQuery进行打包 四、externals 五、对css文件进行打包压缩 六、webpack性能优化-tree shaking(树摇) 1、使用 ES6 模块化 2、开启 **production**环境 ​七、code split（代码分割） 为什么要使用代码分割？ 第一种方法：多入口拆分 第二种方法：optimization 第三种方法：import动态导...
source-map使用
qq_39889855的博客
11-30 1004
4. 点击调试的绿色小三角，进行断点调试，可直接定位到代码。3. 在相应的代码处添加断点。
vue cli 配置开发环境下的sourcemap
热门推荐
徐同保的专栏
04-30 1万+
配置方法： vue.config.js: module.exports = { lintOnSave: false, devServer: { //开发环境下设置为编译好以后直接打开浏览器浏览 open: true, }, configureWebpack: (config) => { //调试JS config.devtool = "source-map" }, css: { //查看CSS属于哪个css文件 source
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值