VSCode+Vue代码调试设置

这几天整了个Spring boot+VUE的学生管理系统代码学习，自己也建了个项目边学习边开发，用VSCode调试VUE前端代码时，两个项目出现了不同情况的无法打断点的问题，现在这里记录一下解决办法。

首先是买的这个代码，调试环境launch.json等就不说了，网上一大堆，主要问题是配置好调试环境后，打断点都显示未绑定到代码，后来查到是要添加源映射，都说要在index.js或者vue.config.js中添加devtool: "source-map"，但是这个工程里面就没有这两个配置，只好手动添加了一个vue.config.js，内容如下：

module.exports = {
  publicPath: "./", // 基本路径
  outputDir: "dist", // 构建时的输出目录
  assetsDir: "static", // 放置静态资源的目录
  indexPath: "index.html", // html 的输出路径
  filenameHashing: true, // 文件名哈希值
  lintOnSave: true, // 是否在保存的时候使用 `eslint-loader` 进行检查。
  // 组件是如何被渲染到页面中的？ （ast：抽象语法树；vDom：虚拟DOM）
  // template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面
  // runtime-only：将template在打包的时候，就已经编译为render函数
  // runtime-compiler：在运行的时候才去编译template
  runti