vue.js3.2.20: 在打包时取消生成.map文件
2023-09-14 08:59:32 时间
一, .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专题 05_详解vue生命周期的每个节点
- VUE 路由入门
- 深入浅出,带你看懂Vue组件间通信的8种方案
- 创建vue脚手架项目
- Nginx部署Vue项目
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue如何引用外部js_引入外部js文件
- vue-router+vuex的坑
- Vue生成二维码_vue通过二维码分享
- vue中的ajax_创建vue实例
- vue跨域问题的三种解决方案_vue上线之后跨域问题
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 前端三大框架之Vue-day01
- java和vue视频点播系统视频弹幕系统
- vue-grid-layout数据可视化图表面板优化过程所遇问题汇总
- Vue 指令之插值 v-text、v-html、v-once
- vue源码分析-从new Vue开始_2023-02-24
- 「.vue文件的编译」4. 模板编译之AST的优化
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 使用Vue从Redis获取数据(vue去redis取数据)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)