由于在开发vue项目的时候,我用的时vue-cli创建的项目, 在debugger调式的时候,会经常找不到断点的位置, 这是因为我的项目为了规范起,每个文件夹都有一个主文件 index.vue , 最后项目会有很多的index.vue 这样的文件,导致调式的时候,由于文件名冲突,会找不到正确的debugger 位置,

解决方法:
1 给每一个vue文件都起一个唯一的名字,这样就不会文件名冲突了。(强烈不推荐), 这不符合项目规范, 导致后面开发人员找不到每一个文件夹的入口位置。

  1. 配置 . devtool:‘souce-map’ ,
    2.1 如果项目时用webpack创建的,可以在 webpack.config.js 这个配置文件夹中配置

     devtool: 'cheap-module-source-map',
    

    2.2 如果是用 vue-cli创建的, 可以在vue.config.js 这个配置文件中配置:

  	 module.exports = {
  		    configureWebpack: {
  		        devtool:'souce-map'
  		    }
}

如图
在这里插入图片描述

在这里插入图片描述
这样就ok 了,
如果觉得还不放心,可以在
main.js 文件中配置:
Vue.config.devtools = true
就完美搞定

学会了,学会了点个赞吧。

Logo

前往低代码交流专区

更多推荐