vue-cli取消打包时生成css和js对应的map文件

最新推荐文章于 2023-12-21 17:23:00 发布
最新推荐文章于 2023-12-21 17:23:00 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： javascript 前端开发 文章标签： vue-cli map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbysj/article/details/93051628
版权

现在交付的前端项目,文件都都是压缩混淆过的,压缩混淆代码,主要可以见效代码质量,压缩文件提交,再就是可以增加代码的安全性.因为尤其是近几年来,前端在项目中的权重越来越高,越来越多的逻辑代码都会写到前端部分,然后前端代码又必须借助于浏览器这个载体,才能将它的作用发挥出来,那么前端的代码安全也就越来越重要了,那么混淆压缩代码,就可以在一定程度上增加代码的安全性.

我们在使用Vue的时候,打包后发现css和js文件都对应的生成了map文件.有了map文件在调试代码的时候,可以为我们带来很大的便利,但是这些map文件的质量实在是太大了,大的让人难以接受,因为它已经远远超出了对应的css和js的代码质量了.所以在项目上线打包的时候从源头上控制不让生成map文件.

具体的配置方法如下:

vue-cli2.x:config目录下的index.js文件,默认是在59行,将productionSourceMap属性更改为false,或者直接将这个属性给注释掉.

//修改前
productionSourceMap: true,

//修改后
productionSourceMap: false,

 

suchcl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解webpack+vue-cli项目打包技巧
11-30
在现代前端开发中，Webpack 和 Vue CLI 是两个非常重要的工具，它们帮助开发者高效地管理和构建项目。本篇文章将深入探讨如何使用这两个工具进行项目打包，同时分享一些实用的技巧来优化打包过程，提升项目的性能。 ...
vue 2.0 打包的时候去除掉 .map 文件
weixin_33882443的博客
05-25 711
.map 的文件作用在于 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而.map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 去除掉的原因 打包过后.map文件过大，为了减轻项目的大小 去除掉的方法 修改 config/index.js 中：productionSourceMap: false 默认为tru...
【React】打包时不生成 .map 文件
hazelnut_x的博客
01-16 1545
.map 文件作用及 react 在打包时如何不生成 .map 文件
vue 打包生成的map文件
fly_vip的博客
12-11 1893
map 文件主要是用来定位打包以后出现错误的位置 可以不生成，再config/index.js 修改一下参数 productionSourceMap: false, map文件再打包文件中占较大内存 转载：https://blog.csdn.net/qappleh/article/details/99672722 ...
webpack 打包不生产map
书中自有妍如玉的博客
08-11 3028
网站js源代码未进行保护，用webpack打包前，可以将重要的js代码使用JShaman之类的混淆加密工具进行保护，加密保护后的js代码，即使泄露，也不会被分析盗用，因为加密代码无法被二次开发利用。vue：config/index.js 中改为 productionSourceMap: false 就不生成map文件。map文件可以导致的后果：源码泄露、源码可以被他人分析、可以复制出一个高度雷同的网站，可能导致网站用户被欺诈等。react：webpack.config.js中的devtool：false。.
金三银四的 Vue 面试准备
开源世界
03-22 611
前言 为了金三银四的跳槽季做准备，并且我是 vue 技术栈的，所以整理了若干个 vue 的面试题。 每次看别人的博客，都会不自主的去看答案，为了方便检验自己的掌握程度，我特意将答案折叠起来，大家可以先看题目，在脑海中想象一下如果你被问到会怎么回答，然后再展开答案看看和自己的答案有什么不同。 答案非官方，仁者见仁智者见智，仅供参考。 基础使用 MVVM、MVC有什么区别 MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。 其中 View 负责页面的显示逻辑， Model
vue项目打包的时候不生成.map文件
weixin_49692930的博客
11-16 4164
在vue.config.js里配置是否生成.map文件 module.exports = { productionSourceMap: false, //打包不生成map } .map 的文件作用在于 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。而.map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 去除掉的原因 打包过后.map文件过大，为了减轻项目的大小 去除.map 的好处是 1.提升 build速度， 2.深度保护源码（不
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
详解基于vue-cli配置移动端自适应
08-28
在vue-cli生成的webpack配置中，我们需要在cssLoader后添加px2remLoader，并设置remUnit选项。remUnit选项的值是设计稿宽度的1/10，例如，如果设计稿宽度是750px，那么remUnit的值就是75。这样，我们可以在组件中...
详解项目升级到vue-cli3的正确姿势
12-02
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目。Vue CLI 3 是其第三个主要版本，带来了许多改进和优化。在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。...
使用vue-cli打包过程中的步骤以及问题的解决
08-27
5. **优化打包**：在打包过程中，可以考虑启用Vue CLI的生产环境优化选项，包括代码压缩、SourceMap生成、提取CSS到单独文件等。这些设置通常在`vue.config.js`文件中完成。例如，启用CSS预处理器的SourceMap： ``...
禁止create-react-app 打包生成map文件以及LICENSE.txt文件
iVRJay的博客
07-14 3614
· 释放webpack配置 如果项目未释放react-scripts，则先执行命令： yarn eject 释放配置文件，释放后根目录会生成config文件夹和script文件夹； · 修改webpack配置 找到config > webpack.config.js 注意：最新构建的create-react-app项目只有这一个配置，老脚手架则会生成webpack.config.dev.js和webpack.config.prod.js 两个配置； 言归正传： 1、禁止生成LICE
Vue项目打包处理map文件
最新发布
XunLin233的博客
12-21 1029
项目打包过后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map文件就可以像未加密压缩那样，准确的输出是哪一行哪一列有错。再次npm run build进行打包，就不会打包map文件了。其实大部分情况下项目上线了，也不会再去管哪一行报错的问题了。所以该文件如果项目不需要是库去除掉的。
react 打包优化，关闭打包生成的map文件
好巧的博客
01-05 2445
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。成功之后 在项目根目录会出现一个。
压缩Vue项目打包后的体积 包括打包不生成map文件
phhz的博客
10-22 667
原文： 压缩Vue.js打包后的体积方法总结 本项目几乎都是这样做的，除了打包不生成map的配置是vue.config.js里： module.exports = { productionSourceMap: false, //打包不生成map } 如果还不生效就再这样写devtool调试工具： module.exports = { configureWebpack (config) { config.devtool = config.mode==="production"?f
vue项目打包后有哪些文件~详析
weixin_40079913的博客
12-15 6421
css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里 css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。 js文件夹下的.js.map依然是Source map文件，方便我们开发时调试js代码使用。 app.js文件里放的...
vue尚品汇商城项目-day07【52.打包文件，处理map文件】
刘大猫
04-03 407
vue尚品汇商城项目-day07【52.打包文件，处理map文件】
vue-cli2 打包后文件目录解析 .js.map 文件 路由懒加载打包分包
weixin_42448623的博客
08-25 2036
目录结构 打包 为了防止js文件太大 加载出现空白 分包：打包出多个js文件 app.xxxx.js 当前应用程序开发的所有代码（业务代码） manifest.xxxx.js 为打包的代码做底层支撑的（为模块化...做底层支撑） vendor.xxxx.js vendor(提供者，第三方依赖包 vue,vue-loader,...) manifest.xxxx.js 关闭 js混淆丑化 插件 在build/webpack.prod.conf.js 的 注释 new UglifyJsPlugin
vue-配置反向代理
qq_46606159的博客
03-24 415
反向代理用来解决前端跨域问题 先下载库：cnpm install --save axios 引用：import axios from 'axios' Vue.config.js的配置 proxy代理官方文档 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也...
vue-cli3项目搭建与优化全攻略
Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化和构建流程。以下是详细的步骤： 首先，确保你的开发环境满足以下要求： 1. Node.js 版本至少为 8.9，推荐使用 8.11.0 或更高版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值