vue項(xiàng)目編譯運(yùn)行后，在瀏覽器source文件都是壓縮過的，不能在瀏覽器上打斷點(diǎn)。
需要自己配置讓瀏覽器source顯示全部代碼。

配置方法

1、 項(xiàng)目全局搜索 configureWebpack:
2、 找到vue.cong.js 給 configureWebpack 下的 devtool 設(shè)置為 'source-map'
3、 重啟項(xiàng)目

image.png

附上代碼：

module.exports = {
  // 放置靜態(tài)資源的地方 (js/css/img/font/...)
  assetsDir: 'static',

  // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
  productionSourceMap: false,

  configureWebpack: {
    devtool: 'source-map', // 配置本地調(diào)試
    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
  }
}

打斷點(diǎn)的位置：

image.png

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