很多小伙伴们,在开发vue 项目的时候,如果想断点调试,会发现在浏览器的source 中,只能看到vue项目打包后的js或者css项目。无法看到 vue 源文件,也就是 .vue 文件。
实际上只需要做到两步,就行了。
第一步 : 在 chrome 浏览器中,安装 devtools 插件。
第二步 : 在 vue 项目中的配置文件中,配置 允许调试。
先说第二步,具体配置是 :
configureWebpack: {
devtool: 'source-map'
}
第一步,安装 devtools 插件。这里最简单的方法,就是去谷歌的商店中,去下载,安装。但是,由于很多限制,很多小伙伴们无法翻墙。无法下载。下面推荐第二种方式。
1.先把 github 上的 devtool源码 克隆到本地
git clone https://github.com/vuejs/vue-devtools.git
第二步:安装项目所需要的npm包
npm install
第三步:编译项目文件
npm run build
第四步:添加至chrome游览器
如果下载的是 .crx ,需要先解压一下。变成文件夹了,才能添加到 浏览器的扩展程序。
需要注意的是必须要将开发者模式打开,否则,无法添加。