vue 組件命名index.vue重名調試不進斷點

一.問題：

遵守vue組件規范，vue的命名都是index.vue，但是當組件過多活着父子關系比較緊密，就會出問題。

二.解決方案：

在vue.config.js中配置調試：

1.configureWebpack節點下配置 

 devtool: process.env.NODE_ENV === 'dev' ? 'source-map' : undefined,

 

2. productionSourceMap

  productionSourceMap: process.env.NODE_ENV === 'dev',

三.配置詳情

vue.config.js 

module.exports = {
 //......上面一堆配置
  productionSourceMap: process.env.NODE_ENV === 'dev',
//......
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'dev' ? 'source-map' : undefined,
// 下面也是一堆配置...
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },

配置無效：

1.修改vue.config.js后需要重啟服務；

2.上圖配置的  dev字符串修改成自己的環境變量值。

3.查看變量值方式：

在main.js中輸出或調試如下代碼