vue webpack打包配置生成的源映射文件不包含源代码内容、加密混淆压缩

前言:此案例使用的是vue-cli5

一、webpack源码泄露造成的安全问题

我们在打包后部署到服务器上时,能直接在webpack文件下看到我们项目源码,代码检测出来是不安全的。如下两种配置解决方案:
1、直接在项目的vue.config.js文件中加上 productionSourceMap: false
在这里插入图片描述
2、Webpack 中的 devtool 属性用于配置源映射文件的生成方式,以便在开发过程中进行调试。不同的 devtool 选项会影响源映射文件的大小、精确度和安全性。以下是一些常用的 devtool 属性及其特点:

(1)eval:
特点:生成的源映射以 eval 的方式嵌入到生成的代码中,速度快但精确度较低。
安全性:由于源映射直接暴露在生成的代码中,可能存在安全风险,不建议在生产环境中使用(2)cheap-source-map:
特点:生成的源映射会将每行映射到转换后的代码的行,但不会映射到列,以减小源映射文件的大小。
安全性:源映射文件相对简单,但仍可能暴露部分源代码信息,不建议在生产环境中使用。(3)source-map:
特点:生成最详细的源映射文件,包含每行每列的映射关系,提供最全面的调试信息。
安全性:源映射文件包含完整的源代码信息,可能存在较高的安全风险,不建议在生产环境中使用。(4)hidden-source-map:
特点:生成的源映射文件不包含源代码内容,提供调试信息但不暴露源代码。
安全性:相对较安全,适合在生产环境中使用以提供调试功能。(5)nosources-source-map:
特点:生成的源映射文件不包含源代码内容,提供最基本的调试信息。
安全性:非常安全,适合在生产环境中使用以提供基本的调试功能。

按照自己的需求修改属性
在这里插入图片描述

二、配置代码加密是另一个重要的安全措施,它可以防止源代码被轻易泄露

安装依赖

npm install --save-dev webpack-obfuscator javascript-obfuscator

在这里插入图片描述

三、配置Terser插件进行代码混淆和压缩

安装依赖

npm i terser-webpack-plugin

在这里插入图片描述

四、总结以及完整配置代码

总结: 通过配置 vue.config.js 文件,我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆。通过压缩代码,我们可以减小文件的大小,提高加载速度。通过加密和混淆代码,我们可以增强应用程序的安全性,防止源代码被轻易泄露。代码压缩、加密和混淆是优化 Vue 应用程序性能和提高安全性的关键步骤。它们可以帮助我们提供更好的用户体验,并保护应用程序的知识产权。

完整配置代码:

const { defineConfig } = require('@vue/cli-service')
const WebpackObfuscator = require('webpack-obfuscator');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = defineConfig({lintOnSave: false, // eslint-loader 是否在保存的时候检查transpileDependencies: true,productionSourceMap: false, //禁用生产环境下的源映射 解决打包webpack源码泄露造成的安全问题configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 配置代码加密是另一个重要的安全措施,它可以防止源代码被轻易泄露// 启用Webpack Obfuscator插件进行代码加密config.plugins.push(new WebpackObfuscator({rotateUnicodeArray: true, // 打乱Unicode数组顺序}));// 配置Terser插件进行代码混淆和压缩config.optimization.minimizer = [new TerserPlugin({terserOptions: {mangle: true, // 开启变量名混淆compress: {drop_console: true, // 移除所有的console.log语句},},})];}},chainWebpack: config => {config.resolve.alias.set('@', path.resolve(__dirname, 'src'));// config//   .when(process.env.NODE_ENV === 'production',//     config => config.devtool('hidden-source-map')//   )}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819212.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 8的流(Stream)和Lambda表达式判断List<User>中的gender为男性时,age是否为空

Java 8的流(Stream)和Lambda表达式判断List中的gender为男性时,age是否为空 在Java 8及以上版本中,您可以使用Stream API的filter和anyMatch方法来判断List中的gender为男性时,age是否为空。这里假设User类有getAge和g…

Android 使用ping命令判断当前网络状态

一. 介绍 ping命令是用来测试和诊断网络连接问题的基本命令,当然我们的终端设备(手机/平板/车机)都可以用这个命令来判断当前网络是否有流量的状态,本篇文章主要介绍Linux的ping命令,因为Android系统也是使用了Linux内…

OpenAI官宣位于东京的首个亚洲办公室,并将发布专为日语优化的GPT-4定制模型!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

科技云报道:AI大模型疯长,存储扛住了吗?

科技云报道原创。 AI大模型正在倒逼数字基础设施产业加速升级。 过去一年半,AI大模型标志性的应用相继出现,从ChatGPT到Sora一次次刷新人们的认知。震撼的背后,是大模型参数指数级的增长。 这种数据暴涨的压力,快速传导到了大模…

Unity 3D定点数物理引擎实战系列:BEPU物理引擎碰撞计算与碰撞规则的架构与设计

前面我们讲解了如何监听物理引擎的碰撞事件, 在物理引擎内核中如何架构与设计碰撞规则,使得物理Entity与周围的物理环境产生碰撞时,如何灵活的控制物理碰撞,本节給大家详细的讲解BEPUphysicsint 物理引擎内部是如何管理与控制碰撞规则的。本文主要讲解3个…

洛谷 P5143 攀爬者 题解 快排

攀爬者 题目描述 他在地形图上标记了 N N N 个点,每个点 P i P_i Pi​ 都有一个坐标 ( x i , y i , z i ) (x_i,y_i,z_i) (xi​,yi​,zi​)。所有点对中,高度值 z z z 不会相等。HKE 准备从最低的点爬到最高的点,他的攀爬满足以下条件&…

HTML的超链接

前言&#xff1a; 如图&#xff0c;我们在浏览网页时经常可以看到这样的字体&#xff08;点击便跳转到了别的地方了&#xff09;&#xff0c;今日就和各位一起学习一下超链接的相关知识。 相关知识1&#xff1a; 超链接的标签为&#xff1a;a ~使用格式为&#xff1a; <a h…

node.js服务器静态资源处理

前言&#xff1a;node.js服务器动态资源处理见 http://t.csdnimg.cn/9D8WN 一、什么是node.js服务器静态资源&#xff1f; 静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件. 它最初在服务器运行之前是什么样子, 到服务器结束运行时, 它还是那个样子. 比如平…

单元测试四大过程

单元测试四大过程&#xff08;蓝桥课学习笔记&#xff09; 单元测试过程 单元测试是软件测试过程中的一个关键环节&#xff0c;它与集成测试、系统测试一样&#xff0c;分为测试策划、测试设计、测试执行和测试总结几个阶段。 单元测试过程中每个阶段需要完成的主要工作如下&…

JavaScript 中的基本数据类型

JavaScript 中的基本数据类型&#xff08;也称为原始数据类型&#xff09;包括以下几种&#xff1a; Number&#xff1a;用于表示整数和浮点数。例如&#xff1a;42, 3.14159, Infinity, -Infinity, NaN&#xff08;不是一个数字&#xff09;。String&#xff1a;用于表示文本…

数据结构排序算法

排序也称排序算法(SortAlgorithm)&#xff0c;排序是将一组数据&#xff0c;依指定的顺序进行排列的过程。 分类 内部排序【使用内存】 指将需要处理的所有数据都加载到内部存储器中进行排序插入排序 直接插入排序希尔排序 选择排序 简单选择排序堆排序 交换排序 冒泡排序快速…

Altair® RapidMiner® 数据分析与人工智能平台,端到端统一数据科学平台

Altair RapidMiner 数据分析与人工智能平台&#xff0c;端到端统一数据科学平台 无论您的组织处于数据旅程的哪个阶段&#xff0c;Altair RapidMiner 都能帮助您克服前进道路上的挑战性障碍。我们为成熟的数据分析团队提供现代化之路&#xff0c;也为刚刚起步的团队提供自动化…

用html写文本变形动画

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>文本变形动画</title><link rel"stylesheet" href"./style.css"> </head> <body> <!-- 两个文本部分…

ChatGPT进阶指南:写作高质量论文技巧

ChatGPT无限次数:点击直达 ChatGPT进阶指南&#xff1a;写作高质量论文技巧 在当今信息爆炸的时代&#xff0c;撰写高质量论文成为了研究者们必备的重要技能。随着人工智能技术的不断发展&#xff0c;像ChatGPT这样的自然语言生成模型为我们提供了强大的辅助工具&#xff0c;帮…

广东莱斯广告,6.8米UV喷印推动粤东喷绘产业升级

广东莱斯广告作为汕头市大型的广告服务运营商,近日迎来了一件值得庆祝的事情:彩神6.8米UV喷印机运行一周年,销售服务商深圳嘉豪总经理李伟特地前来回访。该设备是深圳润天智数字设备股份有限公司开发的全球首台搭载XTRA6800H柯尼卡喷头的设备,设备特点是:1.色彩艳丽;2.超宽喷印…

记录flume运行时报NullPointerException异常

【背景说明】 我要起一个将kafka上的topic_log主题中的数据上传到hdfs上的flume进程。 这是我的flume配置文件脚本&#xff1a; #定义组件 a1.sourcesr1 a1.channelsc1 a1.sinksk1#配置source1 a1.sources.r1.type org.apache.flume.source.kafka.KafkaSource a1.sources.r…

《Kubernets证书篇:基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年&#xff0c;因此需要每年手动更新一次节点上面的证书&#xff0c;特别麻烦而且更新过程中可能会出现问题&#xff0c;因此我们要对 Kubernetes 的 SSL 证书有效期进行修改&#xff0c;这里将证书的时间限制修改为100年。 环境信息…

口语 4.21(提前)

bet for sure 没问题 literally&#xff1a;真正意义上的/字面意思的 like literal security guard:字面的那个理解吗 chilliest job ever :最轻松的工作 night shift day shift 晚班 早班 you got a degree:你拿到文凭了&#xff1f; for now&#xff1a;暂时 gig&a…

112 arcpy 发布 mxd地图文件 到 arcgis服务器 为 地图服务

前言 此文档主要是记录一下 最近的一次机遇 arcpy 来发布 地图文件到 arcgis服务器 上面 arcpy 主要是来自于 ArcGIS_Desktop_105_154030.zip 安装之后会在 python 的安装目录 安装另外的一份带 arcgis 的 python 环境, 然后 本文相关类库 也是基于 这个 arcpy 的 python 环境…

web实战项目环境部署(LNMP)

环境搭建准备 1、在本机安装VMware虚拟机&#xff0c;实际工作中&#xff0c;使用的是云服务器 2、在虚拟机上安装并运行Linux系统 3、在本机上安装好远程连接工具&#xff08;xshell/FinalShell&#xff09;&#xff0c;通过远程连接工具连接到虚拟机 4、关闭linux上的防火…