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

更新时间：2024年06月06日 14:46:21 作者：jaqi.l

这篇文章主要介绍了解决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/')
        }
    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何在vue中使用jointjs过程解析
这篇文章主要介绍了如何在vue中使用jointjs过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
vue中$refs的用法及作用详解
这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-04-04
vue实现二维码扫码功能(带样式)
最近接了一个移动端的项目，实现微信扫码功能，今天小编利用这个平台给大家分享vue实现二维码扫描功能的实现代码，需要的朋友参考下吧
2021-08-08
Vue中使用echarts实现绘制人体动态图
这篇文章主要为大家详细介绍了Vue中如何使用echarts实现绘制人体动态图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
vue实现把接口单独存放在一个文件方式
这篇文章主要介绍了vue实现把接口单独存放在一个文件方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue+Element-U实现分页显示效果
这篇文章主要为大家详细介绍了Vue+Element-U实现分页显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
Vue3中的组合式 API示例详解
组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件，这篇文章主要介绍了什么是Vue3的组合式 API,需要的朋友可以参考下
2022-06-06
$前端使用el-table自带排序功能\后端排序方法实例$
前端使用el-table自带排序功能\后端排序方法实例
在Vue.js中使用Element UI库时可以通过el-table组件来展示表格数据,并支持列排序,下面这篇文章主要给大家介绍了关于前端使用el-table自带排序功能\后端排序的相关资料,需要的朋友可以参考下
2024-08-08
vue子组件如何使用父组件传过来的值
这篇文章主要介绍了vue子组件如何使用父组件传过来的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
使用vue-draggable-plus实现拖拽排序
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下
2024-01-01