VUE源代码调试方法总结

直接调试源码

1. vue.config.js配置sourcemap

在vue.config.js增加productionSourceMap和configureWebpack.devtool的配置，在chrome浏览器里面就会对应上vue文件了：

module.exports = {
 //......上面一堆配置
  productionSourceMap: process.env.NODE_ENV === 'dev',
//......
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'dev' ? 'source-map' : undefined,
// 下面也是一堆配置...
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

2. Ｃhrome浏览器配置dev-tools工具

配置工具的网址：https://github.com/vuejs/vue-devtools

３. build/webpack.dev.conf.js修改配置选项devtool的值

修改前：devtool: ‘#cheap-module-eval-source-map’,
修改后：devtool: '#eval-source-map ',

增加代码调试

１．　增加debugger代码，断点调试
２．　增加console.log(),日志跟踪调试