IT俱乐部 JavaScript 解决vue-cli项目sourcemap因为文件重名导致的文件定位映射错误问题

解决vue-cli项目sourcemap因为文件重名导致的文件定位映射错误问题

vue-cli项目sourcemap文件重名导致的文件定位映射错误

webpack会将所有源码放在同一个目录,项目中不同目录下的index文件重名被覆盖,导致调试时所在行与文件映射关系错乱

解决方案

使用module-eval-source-map

  • vue.config.js文件:
module.exports = {
  configureWebpack: {
  // 处理 同名文件导致的SourceMap定位错误问题
    devtool: process.env.NODE_ENV === 'production' ? '' : 'module-eval-source-map',
  }
}

cheap-module-eval-source-map:不生成列映射,只是映射行数 因此不能解决上述问题

vue source-map设置,@符号使用

Source Map

Source Map 是一个信息文件,里面存储着报错的位置信息,只要有了它,出错的时候,可以直接定位到开发时的原始代码,而不是压缩转换后的代码。

极大的方便我们测试,需要在webpack.config.js里面设置。

  • 开发模式
module.exports = {
    //在开发调试阶段,建议把devtool的值设置为eval-source-map
    devtool:'eval-source-map',
}
  • 实际发布
module.exports = {
    //在实际发布的时候,建议将devtool的值设置为nosources-source-map或者关闭sourceMAP
    devtool:'nosources-source-map',
}

@符号查找文件

需要在webpack.config.js里面设置。

module.exports = {
     resolve: {
        alias: {
            //@符号表示src为查找文件的第一级目录
            '@': path.join(__dirname, './src/')
        }
    }
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11739.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部