vue项目如何在浏览器中打断点

vue项目编译运行后，在浏览器source文件都是压缩过的，不能在浏览器上打断点。
需要自己配置让浏览器source显示全部代码。

配置方法

1、 项目全局搜索 configureWebpack:
2、 找到vue.cong.js 给 configureWebpack 下的 devtool 设置为 'source-map'
3、 重启项目

image.png

附上代码：

module.exports = {
  // 放置静态资源的地方 (js/css/img/font/...)
  assetsDir: 'static',

  // 是否为生产环境构建生成 source map？
  productionSourceMap: false,

  configureWebpack: {
    devtool: 'source-map', // 配置本地调试
    module: {}
  },
  // 配置less
  // chainWebpack: config => {
  //   const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  //   types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  // },
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: true
  }
}

打断点的位置：

image.png

文件是webpack中的.vue文件！！！