调试 Vue-cli 初始化的项目

使用vue-cli初始化项目后，调试变得极其困难。之前一直使用 console 和 debugger 进行调试，每次都要刷新，很繁琐。后来查找资料，发现改变 webpack 的配置，可以非常容易地进行调试。

将 /config/index.js 中的配置

module.exports = {
  dev: {
    devtool: "cheap-module-eval-source-map"
  }
}

改为如下配置即可

module.exports = {
  dev: {
    devtool: "source-map"
  }
}

使用 Sources 面板的查找功能 (Ctrl+F)，查找自己定义的 onPreLoad 方法，打上断点，就可以进行调试了。

改变配置的前后对比

改变配置前

改变配置后

devtool 的其他配置如下

devtool	构建速度	重新构建速度	生产环境	品质
(none)	+++	+++	yes	bundled code
eval	+++	+++	no	generated code
cheap-eval-source-map	+	++	no	transformed code (lines only)
cheap-module-eval-source-map	o	++	no	original source (lines only)
eval-source-map	--	+	no	original source
cheap-source-map	+	o	yes	transformed code (lines only)
cheap-module-source-map	o	-	yes	original source (lines only)
inline-cheap-source-map	+	o	no	transformed code (lines only)
inline-cheap-module-source-map	o	-	no	original source (lines only)
source-map	--	--	yes	original source
inline-source-map	--	--	no	original source
hidden-source-map	--	--	yes	original source
nosources-source-map	--	--	yes	without source content

+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

含有 eval 的选项会转换为字符串，进行调试相当麻烦。
配置改为 source-map ，hidden-source-map或者inline-source-map ,均可进行调试。虽然构建速度慢了一些，但是最起码可以进行调试了。

webpack官方文档说明

感谢阅读！