六、vue cli 调试

一、VS code中断点调试Vue CLI 4项目

1、Debugger for Chrome插件

2、配置vue.config.js文件(如果没有，在根目录下新增一个)

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

3、配置babel.config.js 文件

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

4、配置launch.json文件 

点击F5选择Chorem配置，即可查看Launch.json文件并替换

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        },
    ]
}

启动项目 npm run serve

F5打开调试