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

    然后点击保存就会出现源代码报错的行数。
目录
相关文章
|
22天前
|
Android开发
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
Autox.js 脚本开发环境搭建,从案例到打包apk(详细流程)
767 0
|
8月前
|
前端开发
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
|
2天前
|
前端开发 测试技术 API
vite项目怎么build打包成不同环境的代码?从而适配不同环境api接口
vite项目怎么build打包成不同环境的代码?从而适配不同环境api接口
10 0
|
2天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的线上书籍查阅系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的线上书籍查阅系统附带文章和源代码部署视频讲解等
18 4
|
22天前
|
JavaScript
用户安装nodejs设置路径打包项目
用户安装nodejs设置路径打包项目
46 1
|
11月前
|
JavaScript
vue项目上传服务器之后上传图片功能报错问题解决方案
vue项目上传服务器之后上传图片功能报错问题解决方案
85 0
|
JavaScript
Vue 项目cli打包上线后,路径错误,解决方法
Vue 项目cli打包上线后,路径错误,解决方法
133 0
|
Java API Maven
Gradle基础|自定义插件并上传到JitPack
每一个使用 Gradle 的同学,肯定都听过或者写过插件,因为其本身并不难,但碍于现在网上的文章千篇一律,大部分都比较老,新同学一上手反而是和我一样,花了大把时间在最基础的第一步如何写一个简单demo上。再者如果大家使用 AndroidStudio BumBlebee 去创建项目,那对照网上教程差别更大,甚是花费时间,而本篇就是帮你省掉这些时间。 本篇主要概括创建插件的三种方式,并如何上传到 JitPack 中。
165 0
Gradle基础|自定义插件并上传到JitPack
|
资源调度 前端开发
使用react脚手架快速搭建项目以及项目文件的介绍(目录文件的功能及作用)
本篇文章教大家使用脚手架搭建react的项目,对于新建的react项目,项目目录里的文件都是干什么的,有什么作用呢?
293 0
使用react脚手架快速搭建项目以及项目文件的介绍(目录文件的功能及作用)
|
缓存 IDE 前端开发
浅谈Springboot使用IDE编译时前端文件仍是旧文件的问题
浅谈Springboot使用IDE编译时前端文件仍是旧文件的问题
147 0
浅谈Springboot使用IDE编译时前端文件仍是旧文件的问题