【Vite+Ts】打包使用js混淆加密_vite代码混淆(1)

最新推荐文章于 2024-12-20 09:15:01 发布
最新推荐文章于 2024-12-20 09:15:01 发布
阅读量874 收藏 10
点赞数 18
分类专栏： 2024年程序员学习 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76328475/article/details/137663546
版权
本文介绍了如何使用Vite与TypeScript打包后对JavaScript文件进行加密，通过修改`package.json`配置实现。内容包括加密过程、效果展示，并分享了网络安全相关的学习资源，如成长路线图、视频合集、书籍推荐、源码和面试题，旨在帮助网络安全工程师系统学习和提升技能。
摘要由CSDN通过智能技术生成

这里我使用命令行对dist打包后的js文件进行加密。
其他加密配置的话可能要新建js文件进行引入配置，这里不弄了，加密了就够了…

package.json 配置

"scripts": {
  "dev": "vite",
  "build": "vue-tsc && vite build",
  "preview": "vite preview",
  // 增加以下代码
  "jm":"javascript-obfuscator ./dist/static/js --output ./dist/static/js"
},

./dist/static/js为你打包后js的目录或者文件

效果图

在这里插入图片描述

在这里插入图片描述
感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~

最低0.47元/天 解锁文章
vite打包编译后类名混淆冲突问题处理
lj1530562965的博客
12-30 8216
vite打包编译后类名混淆冲突问题处理 背景 在项目开发过程中，发现同个views引用的不同stora打包编译后的类名偶发性存在一致的情况，都为n，导致类名冲突 解决方案 类名不进行打包混淆处理，防止丢弃或修改类名 找到vite官网发现有terserOptions的配置，于是增加terserOptions配置，配置如下： build: { minify: 'esbuild', // 进行压缩计算 brotliSize: false, outDir: e
vue3+vite项目打包文件混淆加密
宇叔儿
05-23 3719
给JS文件进行混淆加密的主要原因是为了增加代码的安全性并保护知识产权。具体来说，混淆加密技术通过改变JS代码的语法形式、增加多余的代码结构、添加无用的标识符、重命名变量等方式，使代码变得混乱无序，难以被理解和分析。这种处理可以有效地防止黑客攻击和非法访问，因为混淆加密后的代码使得攻击者难以阅读和理解代码的逻辑和结构，从而增加了破解代码的难度。同时，混淆加密还可以防止其他人轻易窃取和复制这些代码，从而保护软件开发者和企业的知识产权，防止他们的代码被恶意篡改、复制或盗用。
前端如何在 Vite 项目中混淆你的代码，并让小偷怀疑人生？
最新发布
人生如代码，永远有bug
12-20 1476
是保护代码安全的利器。通过简单的安装和配置，你就能让自己的代码免受抄袭者的“毒手”。当然，代码混淆并不是万能的，但它可以显著增加抄袭的难度。所以，何不试试看，用混淆的艺术武装你的代码？让抄袭者绞尽脑汁却无从下手，让你的代码永远保持高贵的神秘感！
vite下javascript-obfuscator 代码混淆
11-24 4977
关于 rollup-plugin-obfuscator 插件的配置选项列表，每个选项都用于定制代码混淆和压缩的方式。在vite.config.ts中引入插件，并进行设置。1.高混淆，低性能。性能会比没有混淆的时候慢很多。2.中等混淆，最佳性能。性能会比没有混淆时慢。3.低混淆、高性能。表现会处于比较正常的水平。项目环境：Vue3+Vite。4.默认预设，高性能。
【Vite+Ts】打包使用js混淆加密_vite代码混淆(1)，2024年最新农民工看完都学会了
2401_83739411的博客
04-14 1489
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
Vite实现JS混淆加密
yuezz的博客
06-14 711
本人工作需要整一下js加密。但是现有的vite插件都不好使，于是自己封了一个插件，亲测好用，已经在生产环境跑了。
【Vite+Ts】打包使用js混淆加密_vite代码混淆
2301_76328475的博客
04-12 714
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vite+ts+react组件库，一套适合开发者使用的轻量级UI组件库，完美支持React18+TS+Vite.zip
02-09
Vite+TS+React 组件库是一套专为开发者设计的轻量级UI组件集合，它结合了最新的React 18、TypeScript（TS）和Vite构建工具，旨在提高开发效率并提供卓越的开发体验。这个组件库的创建是为了满足现代Web应用程序快速...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、数学、电子信息等...
vite项目，打包后js文件进行加密
令瑞斌
07-15 433
说明： ./build是指需要加密的文件目录。--output 是加密后文件的输出目录。当加密目录与输出目录一样时，文件会被覆盖。加密插件：javascript-obfuscator。
vue3 vite使用javascript-obfuscator混淆js代码
cc1314_工作、学习有感
07-24 799
/dist/assets/ --output ./将原js文件替换为混淆后的文件。./dist/assets/为js文件存放位置，根据你的项目结构进行调整。安装 javascript-obfuscator。在 package.json 中配置脚本。
【已解决】Vue项目中Vite以及Webpack代码混淆处理
热门推荐
编码世界
10-23 6万+
关于代码混淆网上案例铺天盖地，90%以上都是`Webpack`相关来处理代码混淆，对于`Vite`的案例少之又少，在解决vite项目代码混淆我花了一些时间来找合适的插件区处理这个问题，最终选择`rollup-plugin-obfuscator`。另外第四章节介绍了`Webpack` 处理代码混淆方案。
vue3+vite代码混淆插件
weixin_45061714的博客
10-25 1398
1、vite-plugin-obfuscator ：打包之后实现了混淆，但是上了sit 之后，出现样式丢失问题，看自己的配置项， 将stringArray设置为：stringArray: false。到了测试环境看过之后，混淆程度是很高，很多label名没有变成混淆后的字符串。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。这里也可以不写，所以我直接去掉了，后面又报错路由问题，后面解决之后又出现了请求接口时报错，这个无法解决，猜测是 stringArray: true, 配置项开启导致的。
vue项目配置 webpack-obfuscator 进行代码加密混淆
chinaherolts2008的博客
02-25 3281
背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置 // w
【Vite+Ts】打包使用js混淆加密_vite代码混淆，网络安全面试项目包装
2401_83739411的博客
04-14 475
这里我使用命令行对dist打包后的js文件进行加密。其他加密配置的话可能要新建js文件进行引入配置，这里不弄了，加密了就够了…
vite加密打包插件(vite-plugin-javascript-obfuscator)选项(option)详解
一起学习
04-27 1754
本文主要介绍vite加密打包插件(vite-plugin-javascript-obfuscator)选项(option)。
Vue3+Vite开发的项目进行加密打包
一起学习
04-27 1538
本文主要介绍Vue3+Vite开发的项目如何进行加密打包。
vue打包js文件混淆加密保护
大英雄不该去雪山打滚
11-22 1万+
需求 部署到服务器上的vue项目在网页F12之后能看到源码，vue文件啦，js文件啦，都能看到，连我的注释都能看到，这能随便给别人看？ 环境 vue 3 vue cli 4 webpack 4 解决方案 方案一 工具：“uglifyjs-webpack-plugin”: “^2.2.0” 使用： const UglifyJsPlugin = require('uglifyjs-webpack-plugin') ... module.exports = { configureWebpack: {
Vue3 + Vite + TS 环境配置全攻略
创建完成后，主要的源代码将在`src`目录下，包括`main.ts`（或`main.js`）。在这里，你可以导入并使用Vue3组件。例如，如果你打算使用`App.vue`作为入口组件，你需要在`main.ts`中引入它。 5. **暴露服务器**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值