Vue 项目 VSCode 调试

调试Vue搭建的前端项目

 

在项目根目录下的vue.config.js中添加:

module.exports = {
  lintOnSave: false, //关闭eslint语法校验
 //填写这部分 configureWebpack: { devtool: 'source-map' } // devServer: { // proxy: 'http://localhost:8080', // public: '192.168.0.53:8080' // 本地ip // } }

 

在babel.config.js中添加:

module.exports = {
  env: {
    //填写这部分
    development: {
      sourceMaps: true,
      retainLines: true
    }
    //填写这部分
  },
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};    

安装Debugger for Chrome插件 在debug中添加配置:

vscode  launch.json文件下配置

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

  点击F5,下断点就可以调试

VScode 调试php的方法可以参考https://blog.csdn.net/XinShun/article/details/94836391

上一篇:创建Maven项目生成WebRoot目录


下一篇:FineReport简单部署