vue 生产使用productSourceMap调试

第一步 在vue.config.js中设置productSourceMap 为true

image.png

这里需要注意的是,光是修改了上面的设置,有时候会遇到调试模式一样没有生效的问题.
这时候这样改改就可以了:

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    devtool: 'source-map', // 新增这个 调试模式
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

第二步 右键项目名称 搜索全部文件 搜索某个标识找到对应的文件

image.png

这里找到的是chunk-537513c3.1637287651260.js

第三步

image.png

1. 选择 filessystem 下的 add folder to workspace 添加项目

   
   image.png
   

   2.找到对应的sourceMap文件copy链接

第三步

image.png

右击js文件 添加source map 将刚才的链接地址添加进去

第四步

ctrl+p 搜索开发中的文件命名 image.png
image.png

找到了开发中的源码 可以在这里进行断点查找问题