解决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/')
        }
    }
}

总结

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

您可能感兴趣的文章:

element-ui 中如何修改loading加载样式
element-ui 中的 loading 加载功能,默认是全屏加载效果,设置局部,需要自定义样式或者修改样式,下面给大家分享实例代码,感兴趣的朋友跟随小编一起看看吧
2024-05-05
vue2.0 可折叠列表 v-for循环展示的实例
今天小编大家分享一篇vue2.0 可折叠列表 v-for循环展示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现滚动鼠标滚轮切换页面
这篇文章主要为大家详细介绍了vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
vue3清空reactive的四种方式
本文主要介绍了vue3清空reactive的四种方式,包含使用 Object.assign,使用 Object.keys 和 for...in 循环,使用 delete 操作符和重新赋值4种,感兴趣的可以了解一下
2024-03-03
Django+Vue.js实现搜索功能
本文主要介绍了Django+Vue.js实现搜索功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-06-06
如何在 Vue 中使用 Axios 异步请求API
Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，可以用这个小程序学习英语，同时也能从侃爷的话中得到一些启发，而且还可以学习用 Vue 异步请求API，一举多得，何乐而不为呢？
2021-05-05
vue实现滑动和滚动效果
这篇文章主要为大家详细介绍了vue实现滑动和滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue中el-select中多选回显数据后没法重新选择和更改的解决
本文主要介绍了vue中el-select中多选回显数据后没法重新选择和更改解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
Vue查询数据并通过bootstarp table渲染数据
这篇文章主要为大家介绍了Vue查询数据并通过bootstarp table渲染数据，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue中transition的使用及说明
这篇文章主要介绍了Vue中transition的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07