vue脚手架工程调试的时候sourcemap一直出不来

部分vue.config.js 配置

module.exports = {
  publicPath: './',
  productionSourceMap: true,
  outputDir: 'dist',
  runtimeCompiler: true,
  lintOnSave: false,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/styles/import.less')]
    }
  },

附上截图

我解决了，使用cheap-module-eval-source-map 居然可以了

是的，使用cheap-module-eval-source-map可以解决！

在开发组件的时候，发现sourcemap失效了，在chrome的devtool里，不管是debugger跳转，还是点击抛出错误后面的文件路径跳转都直接跳到一个不相关的文件。

经过反复试验，发现是因为不同组件目录下的vue文件名字都是index.vue,配置的sourmap将不同目录的index.vue文件混淆了，导致所有目录下的index.vue文件的sourmap都映射到同一个index.vue文件上了。
————————————————
版权声明：本文为CSDN博主「zw233333」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36647210/article/details/116297529

没遇到过这种问题，你可以试试下面的配置行不行

/ /vue.config.js
configureWebpack: {
// 省略其他配置
devtool: 'eval-source-map'
}

参考：https://webpack.docschina.org/configuration/devtool/#devtool

在vue.config.js文件 里面，配置上这个，再重新编译一下，然后把浏览器缓存清楚一下看看

 
vue.config.js文件
configureWebpack: {
// 省略其他配置
devtool: 'source-map'
}
 

你好，看一下是不是这个导致的
https://blog.csdn.net/qq_36647210/article/details/116297529

1.source-map

大而全，啥都有，就因为啥都有可能会让 webpack 构建时间变长，看情况使用。

2.cheap-module-eval-source-map

这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡。

3.cheap-module-source-map

一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个

开发推荐第二个方案

新增这个属性 在configureWebpack 中 devtool: 'source-map'

vuecli2：

configureWebpack: {
  name: name,
  devtool: 'source-map', //添加这一句就行
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},


vuecli3：
  configureWebpack: config => {
    //调试JS
    config.devtool = "source-map";
  },

// vue.config.js
configureWebpack: {
// 省略其他配置
devtool: 'source-map'
}