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

朴素妍

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

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

解决方案

使用module-eval-source-map

• vue.config.js文件：
  

1. module.exports = {
   
2.   configureWebpack: {
   
3.   // 处理 同名文件导致的SourceMap定位错误问题
   
4.     devtool: process.env.NODE_ENV === 'production' ? '' : 'module-eval-source-map',
   
5.   }
   
6. }

复制代码

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

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


Source Map

Source Map 是一个信息文件，里面存储着报错的位置信息，只要有了它，出错的时候，可以直接定位到开发时的原始代码，而不是压缩转换后的代码。
极大的方便我们测试，需要在webpack.config.js里面设置。

• 开发模式
  

1. module.exports = {
   
2.     //在开发调试阶段，建议把devtool的值设置为eval-source-map
   
3.     devtool:'eval-source-map',
   
4. }

复制代码

• 实际发布
  

1. module.exports = {
   
2.     //在实际发布的时候，建议将devtool的值设置为nosources-source-map或者关闭sourceMAP
   
3.     devtool:'nosources-source-map',
   
4. }

复制代码

@符号查找文件

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

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

复制代码

总结

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

来源:https://www.jb51.net/javascript/322336ofe.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！