vue.js3.2.20: 在打包時取消生成.map文件


一, .map文件的作用:

項目打包完成后,代碼經過壓縮和加密,在運行時如果報錯,則輸出的錯誤信息無法准確顯示是哪一行的代碼在出錯。
map的作用在於:和未加密的代碼一樣,
能准確的輸出是哪一行哪一列在發生錯誤
可見map文件對於開發、測試環境是必需的,
但對於生產環境則不是必需,而且會帶來安全問題
 

說明:劉宏締的架構森林是一個專注架構的博客,

網站:https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js3-2-20-zai-da-bao-shi-qu-xiao-sheng-cheng-map-wen-jian/

         對應的源碼可以訪問這里獲取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明:作者:劉宏締 郵箱: 371125307@qq.com

二,如何取消生成.map文件

1,查看默認生成的.map文件:
liuhongdi@lhdpc:/data/vue/ma$ ls dist/js
app.2ccbc51f.js  app.2ccbc51f.js.map  chunk-vendors.12a4462b.js  chunk-vendors.12a4462b.js.map 
2,設置取消生成.map文件
創建vue.config.js
liuhongdi@lhdpc:/data/vue/ma$ vi vue.config.js
代碼:
liuhongdi@lhdpc:/data/vue/ma$ more vue.config.js
module.exports = {
        productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
}
3,再次打包測試效果:
清空上次生成的打包文件
liuhongdi@lhdpc:/data/vue/ma$ rm -rf dist/*
再次打包
liuhongdi@lhdpc:/data/vue/ma$ npm run build
查看結果:
liuhongdi@lhdpc:/data/vue/ma$ ls dist/js
app.2ccbc51f.js  chunk-vendors.12a4462b.js
結果可見已沒有.map文件生成
 

三,查看vue的版本:

liuhongdi@lhdpc:/data/vue/ma$ npm list vue
ma@0.1.0 /data/vue/ma
├─┬ @vue/cli-plugin-babel@4.5.14
│ └─┬ @vue/babel-preset-app@4.5.14
│   └── vue@3.2.20 deduped
├─┬ element-plus@1.1.0-beta.20
│ ├─┬ @vueuse/core@6.1.0
│ │ ├─┬ @vue/composition-api@1.2.4
│ │ │ └── vue@3.2.20 deduped invalid: ">= 2.5 < 3" from node_modules/@vue/composition-api
│ │ ├─┬ @vueuse/shared@6.1.0
│ │ │ └── vue@3.2.20 deduped invalid: ">= 2.5 < 3" from node_modules/@vue/composition-api
│ │ ├─┬ vue-demi@0.11.4
│ │ │ └── vue@3.2.20 deduped invalid: ">= 2.5 < 3" from node_modules/@vue/composition-api
│ │ └── vue@3.2.20 deduped
│ └── vue@3.2.20 deduped
└── vue@3.2.20

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM