vue-cli 关于debugger 调式 找不到断点出的解决方法

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

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

2. 配置 . 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
就完美搞定

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