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:// 的文件

    然后点击保存就会出现源代码报错的行数。
目录
相关文章
|
3月前
|
API
1688图片搜索API详解
1688图片搜索接口通过上传图片实现相似商品匹配,适用于电商比价、商品溯源。支持按图搜同款或相似商品,返回商品ID、标题、价格等信息,并可设置分页、排序与筛选参数。核心参数包括图片URL/Base64(imgid)、搜索模式(search_type)及排序方式(sort_type)。
复选框样式修改(复选框变为圆形)
复选框样式修改(复选框变为圆形)
|
JavaScript
Vue3使用全局函数或变量的两种常用方式
这篇文章介绍了Vue 3中实现全局函数或变量的两种方法:一种是使用`provide/inject`进行依赖注入,另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。
1864 2
Vue3使用全局函数或变量的两种常用方式
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
551 59
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
1465 1
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
前端开发 JavaScript
前端搞懂事件循环机制
【8月更文挑战第3天】前端搞懂事件循环机制
213 1
|
JavaScript 前端开发 Linux
|
网络协议 前端开发 数据安全/隐私保护
技术笔记:SOCKS5协议解析
技术笔记:SOCKS5协议解析
496 0
Vue3子传父 组件传参 defineEmits
Vue3子传父 组件传参 defineEmits
273 1
|
JavaScript UED 开发者
解决iframe实时获取资源页面显示空白的问题
解决iframe实时获取资源页面显示空白的问题
909 0