vue.js3.2.20: 在打包时取消生成.map文件
2023-09-14 09:01:18 时间
一, .map文件的作用:
项目打包完成后,代码经过压缩和加密,在运行时如果报错,则输出的错误信息无法准确显示是哪一行的代码在出错。
map的作用在于:和未加密的代码一样,
能准确的输出是哪一行哪一列在发生错误
可见map文件对于开发、测试环境是必需的,
但对于生产环境则不是必需,而且会带来安全问题
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: 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
相关文章
- 请简述什么是Vue组件化开发_vue组件化开发
- 深度学习Vue源码-模板编译原理
- vue文件上传速度慢,有可能是nginx配置的问题
- vue上传文件到Minio
- vue相比jquery_angular和vue哪个厉害
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- 引入vuejs文件_引入vue文件
- 前端三大框架之Vue-day01
- Vue项目骨架屏注入实践
- 【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- 在VScode中配置创建Vue实例对象简单模板
- 2023前端二面高频vue面试题集锦1
- 又来分享3个Vue开源项目,太强了 !
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)