Chrome和VS Code中的Vue.js调试

1. VS Code中安装的最新版的Debugger for Chrome扩展程序
   
   
2. 更新您的Webpack配置
   vue.config.js文件中配置：
   

   // 是否为生产环境
   const isProduction = process.env.NODE_ENV == "production";
   const port = 1028; // dev port
   module.exports = {
     publicPath: "./", // 基本路径，打包时加上
     outputDir: process.env.outputDir || "prod", // 输出文件目录
     productionSourceMap: !isProduction,
     configureWebpack: config => {
       if (process.env.NODE_ENV == "development") {
         // 测试环境中 Chrome和VS Code中的Vue.js调试
         Object.assign(config, {
           devtool: "source-map"
         });
       }
     }
    ...
   }

   
   
3. 配置launch.json文件 
   单击活动栏中的“调试”图标以调出“调试”视图。然后点击齿轮图标以配置launch.json文件，并为环境选择Chrome
   
   用以下配置替换生成的launch.json的内容：
   

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

    

标签：Code,launch,Chrome,js,webRoot,json,Vue,调试
来源： https://www.cnblogs.com/myflowers/p/14737838.html