vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?

简介: vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?

问题

我们上线的时候一般都不会添加sourcemap文件,一方面为了加快构建速度,另一方面避免源码泄漏。所以有时出现报错的时候很难定位问题所在。

例子:比如我写了一个错误的代码,点击

<template>
  <div class="hello">
    <router-link to="/">去首页页面</router-link>
    <h1>{{ msg }}</h1>
    <button @click="handleClick">点击保存</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick() {
      alert(kaimo313);
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

点击就会报错,但是并没有指向什么组件报错,以及哪一行有问题

点进去就是一整行看不懂的代码

那么要如何定位到问题所在?

解决

我们先本地开启sourcemap的生成,生成之后找到对应的map文件,然后丢到包里,比如下面的我的就放到了nginx服务里面,在kaimo包下面

然后我们将map文件的链接 http://localhost/kaimo/index.9d065746.js.map 添加到里面去,步骤如下

  • 先找到有问题的js文件
  • 然后右击文件内容,就能看到 Add source map…

  • 粘贴上面的链接,点击添加

    然后就会多一个 webpack:// 的文件

    然后点击保存就会出现源代码报错的行数。
目录
相关文章
|
JavaScript 前端开发 API
core-js介绍及安装使用
core-js介绍及安装使用
core-js介绍及安装使用
|
7月前
|
API
1688图片搜索API详解
1688图片搜索接口通过上传图片实现相似商品匹配,适用于电商比价、商品溯源。支持按图搜同款或相似商品,返回商品ID、标题、价格等信息,并可设置分页、排序与筛选参数。核心参数包括图片URL/Base64(imgid)、搜索模式(search_type)及排序方式(sort_type)。
|
容器
echarts的grid——图表的位置配置
echarts的grid——图表的位置配置
2686 1
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
725 59
|
前端开发 Java API
React 进度条组件 ProgressBar 详解
本文介绍了如何在 React 中创建进度条组件,从基础实现到常见问题及解决方案,包括动态更新、状态管理、性能优化、高级动画效果和响应式设计等方面,帮助开发者构建高效且用户体验良好的进度条。
418 18
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
6732 1
|
机器学习/深度学习 存储 人工智能
【AI系统】TVM 实践案例
本文探讨了如何利用AI编译器在新硬件上部署神经网络,重点介绍了TVM的工作流程,包括模型导入、转换为Relay、TE和TIR、自动调优、编译为机器码等步骤。文章还讨论了算法层面上的算子优化、量化技术,以及编译层面对量化模型的解析和计算图优化。此外,还介绍了TVM的BYOC框架,允许硬件加速器供应商通过即插即用的方式集成代码工具,实现高效编译和优化。最后,文章提及了算子和网络仿真的重要性,确保新硬件平台上的模型正确性和性能。
426 2
|
JavaScript
Vue3瀑布流(Waterfall)
这是一个基于 Vue2 的瀑布流(Waterfall)组件,支持多种自定义属性,如图片数组、列数、间隙、宽度、圆角、背景色及 Spin 加载样式。组件通过计算每张图片的位置实现动态布局,并利用 Vue 的响应式系统自动调整布局。提供了在线预览和详细代码示例,方便集成到项目中。
860 1
Vue3瀑布流(Waterfall)
scrollIntoView()定位元素显示导致页面上移解决方法?
scrollIntoView()定位元素显示导致页面上移解决方法?
1268 0
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
319 1
前端进度条组件NProgress