vue cli如何配置开发环境下的sourcemap

夜小厾

配置方法

• vue.config.js：
  

1. module.exports = {
   
2.   lintOnSave: false,
   
3.   devServer: {
   
4.     //开发环境下设置为编译好以后直接打开浏览器浏览
   
5.     open: true,
   
6.   },
   
7.   configureWebpack: (config) => {
   
8.     //调试JS
   
9.     config.devtool = "source-map"
   
10.   },
    
11.   css: {
    
12.     //查看CSS属于哪个css文件
    
13.     sourceMap: true,
    
14.   },
    
15. }

复制代码

配置后

配置前

开发环境的最佳品质的source map

1. module.exports = {
   
2.   lintOnSave: false,
   
3.   devServer: {
   
4.     //开发环境下设置为编译好以后直接打开浏览器浏览
   
5.     open: true,
   
6.   },
   
7.   configureWebpack: (config) => {
   
8.     //调试JS
   
9.     config.devtool = "eval-source-map"
   
10.   },
    
11.   css: {
    
12.     //查看CSS属于哪个css文件
    
13.     sourceMap: true,
    
14.   }
    
15. }

复制代码

旧版vue.config.js

1. module.exports = {
   
2.   lintOnSave: false,
   
3.   productionSourceMap: false,
   
4. 
   
5.   configureWebpack: { // 重点
   
6.     devtool: "eval-source-map"
   
7.   },
   
8. 
   
9.   css: { //重点
   
10.     sourceMap: true
    
11.   }
    
12. }

复制代码

总结

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

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