vue-cli生产环境设置构建打包sourcemap定位线上问题

NO.1
官方文档
创建项目
vue create hello-world

后续均在vue.config.js中设置对应属性

NO.2
productionSourceMap
文档地址:https://cli.vuejs.org/zh/config/?#productionsourcemap
在vue.config.js中设置productionSourceMap
默认为true,如果不需要在生产环境使用,设置为false即可
NO.3
configureWebpack
在vue.config.js中设置configureWebpack函数返回值
config.devtool = “source-map”
参考代码
 configureWebpack() {
    return {
      devtool: `source-map`,
    }
  },

或者其他形式代码

configureWebpack: (config) => {
    config.devtool = "source-map"
},
NO.4
调试效果
设置错误属性
let a=null
console.log(`a`,a,a.b)
报错
HelloWorld.vue:15 Uncaught TypeError: Cannot read properties of null (reading ‘b’)
点击上图红框处定位查看sourceMap错误的代码
如果不设置sourceMap,线上的代码被混淆压缩,无法定位到实际的代码错误行
END.