首页 > 其他 > 详细

六、vue cli 调试

时间:2020-02-14 16:03:32      阅读:126      评论:0      收藏:0      [点我收藏+]

一、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打开调试 

 

六、vue cli 调试

原文:https://www.cnblogs.com/fger/p/12307512.html

(0)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!