引言

小伙伴们在开始项目时候最怕就是遇到测试环境好好的，为什么生产就出bug的问题？出bug的原因多种多样，但是由于生产上一般不打source map， devtools没有开导致调试起来比较麻烦。这篇文章解决你的问题。

解决方案

vue

生产上开启devtool

// main.js 
Vue.config.devtools = true

生产上开启source map

// vue.config.js
module.exports = {
  // 配置这个开启生产环境下的source map
  productionSourceMap: true,

}

// 假如你使用代码压缩
new TerserPlugin({
  terserOptions: {
    // 生产环境自动删除console
    compress: {
      drop_debugger: true,
      drop_console: true,
      pure_funcs: ['console.log']
    }
  },
  // 开启source map
  sourceMap: true,
  parallel: true
})

其他

本质上，vue-cli还是对webpack的封装，其他框架下只要配置好两方面

1. 代码中开启devtools
2. 生产打包中开启source即可

感谢

希望大家多多点赞和评论，我会第一时间回复。