解决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中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最近做项目需要实现世界地图,本文主要介绍了Vue3+echarts绘制世界地图的示例代码,具有一定的参考价值,感谢的可以了解一下2024-03-03
这篇文章主要介绍了vue中使用mockjs配置和使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3双向绑定实现原理解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue2的路由和异步请求方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，这篇文章给大家介绍了vue项目中使用AvueJs的相关知识，感兴趣的朋友跟随小编一起看看吧2022-10-10
这篇文章主要介绍了vue中如何实现锚点定位平滑滚动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vux+Axios拦截器增加loading的问题及实现方法，文中通过实例代码介绍了vue中使用axios的相关知识,需要的朋友可以参考下2018-11-11
最新评论