【Vite+Ts】打包使用js混淆加密

已于 2024-02-28 11:20:19 修改
阅读量1.3k 收藏 10
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Vue.js 文章标签： javascript vue.js 安全
于 2024-02-28 11:18:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasyList/article/details/136340983
本文介绍了如何在Vue项目中通过cnpm安装并配置javascript-obfuscator，对打包后的JS文件进行加密处理，同时给出了package.json中的相关script配置和实际操作步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

安装 javascript-obfuscator

cnpm i javascript-obfuscator -D

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

package.json 配置

"scripts": {
   
  "dev": "vite",
  "build": "vue-tsc && vite build"
最低0.47元/天 解锁文章
Vue3+Vite开发的项目进行加密打包
一起学习
04-27 1841
本文主要介绍Vue3+Vite开发的项目如何进行加密打包。
vite加密打包插件(vite-plugin-javascript-obfuscator)选项(option)详解
一起学习
04-27 2286
本文主要介绍vite加密打包插件(vite-plugin-javascript-obfuscator)选项(option)。
vue3+vite项目打包文件混淆加密
宇叔儿
05-23 4717
给JS文件进行混淆加密的主要原因是为了增加代码的安全性并保护知识产权。具体来说，混淆加密技术通过改变JS代码的语法形式、增加多余的代码结构、添加无用的标识符、重命名变量等方式，使代码变得混乱无序，难以被理解和分析。这种处理可以有效地防止黑客攻击和非法访问，因为混淆加密后的代码使得攻击者难以阅读和理解代码的逻辑和结构，从而增加了破解代码的难度。同时，混淆加密还可以防止其他人轻易窃取和复制这些代码，从而保护软件开发者和企业的知识产权，防止他们的代码被恶意篡改、复制或盗用。
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代码混淆指南
最新发布
____Mr.Y的博客
04-18 963
构建后文件混淆：直接混淆已构建的JS文件，最简单且稳定的方式，适合大多数生产环境一步式构建混淆：一次命令同时完成构建和混淆，简化操作流程源代码混淆：针对源代码进行混淆，更复杂但灵活性高，适合有特殊安全需求的场景。
Vite实现JS混淆加密
yuezz的博客
06-14 801
本人工作需要整一下js加密。但是现有的vite插件都不好使，于是自己封了一个插件，亲测好用，已经在生产环境跑了。
vite下使用vite-plugin-obfuscator打包后混淆加密
weixin_50651687的博客
03-19 1599
是一个用于 Vite 的插件，它可以将你的 JavaScript 代码进行混淆，以增加代码的安全性，防止他人轻易地阅读或逆向工程你的代码。混淆工具通常会将变量名、函数名等替换为难以理解的字符，同时可能会移除注释和空白字符，使得代码难以阅读和理解。
vite下javascript-obfuscator 代码混淆
11-24 5758
关于 rollup-plugin-obfuscator 插件的配置选项列表，每个选项都用于定制代码混淆和压缩的方式。在vite.config.ts中引入插件，并进行设置。1.高混淆，低性能。性能会比没有混淆的时候慢很多。2.中等混淆，最佳性能。性能会比没有混淆时慢。3.低混淆、高性能。表现会处于比较正常的水平。项目环境：Vue3+Vite。4.默认预设，高性能。
vue3+ts+vite混淆代码插件那个更好用
03-13
Vite使用Rollup作为打包工具，所以可能需要寻找与Rollup兼容的混淆插件。例如，rollup-plugin-obfuscator可能是一个选项。但需要确认它是否支持TypeScript以及最新的Vue3项目结构。 另外，JavaScript Obfuscator是...
【已解决】Vue项目中Vite以及Webpack代码混淆处理
热门推荐
编码世界
10-23 6万+
关于代码混淆网上案例铺天盖地，90%以上都是`Webpack`相关来处理代码混淆，对于`Vite`的案例少之又少，在解决vite项目代码混淆我花了一些时间来找合适的插件区处理这个问题，最终选择`rollup-plugin-obfuscator`。另外第四章节介绍了`Webpack` 处理代码混淆方案。
vue项目配置 webpack-obfuscator 进行代码加密混淆
chinaherolts2008的博客
02-25 3400
背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置 // w
vue代码打包发布时混淆加密
m0_61452987的博客
06-29 8088
vue 代码混淆加密压缩 - 简书 (jianshu.com)1、安装插件： 2、在 vue.config 文件中配置： 3、重新打包发布： 4、如果有遇到报错清空，大概率是遇到es6语法导致无法压缩。解决方法有很多，最简单的就是更改uglifyjs版本。...
在NodeJS中使用npm包实现JS代码混淆加密
w2sft的博客
10-24 834
混淆加密JS代码、提高JS代码安全性，防止他人随意查看、复制
vue3+vite代码混淆插件
weixin_45061714的博客
10-25 2237
1、vite-plugin-obfuscator ：打包之后实现了混淆，但是上了sit 之后，出现样式丢失问题，看自己的配置项， 将stringArray设置为：stringArray: false。到了测试环境看过之后，混淆程度是很高，很多label名没有变成混淆后的字符串。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。这里也可以不写，所以我直接去掉了，后面又报错路由问题，后面解决之后又出现了请求接口时报错，这个无法解决，猜测是 stringArray: true, 配置项开启导致的。
vue3项目打包附带混淆js
954L
02-15 2263
使用打包插件：terser-webpack-plugin 安装 npm install terser-webpack-plugin --save-dev vue.config.js配置 const TerserPlugin = require('terser-webpack-plugin') configureWebpack: config => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new
【Vite+Ts】打包使用js混淆加密_vite代码混淆(1)，2024年最新农民工看完都学会了
2401_83739411的博客
04-14 1612
本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！
vite+vue3+vuex 加密
One__buyaomanggu的博客
03-19 707
toast("登录成功")
vite项目，打包后js文件进行加密
令瑞斌
07-15 553
说明： ./build是指需要加密的文件目录。--output 是加密后文件的输出目录。当加密目录与输出目录一样时，文件会被覆盖。加密插件：javascript-obfuscator。
vite+ts配置打包
10-15
Vite是一个现代的前端构建工具，它采用了预渲染技术来加速开发速度。TypeScript是一种静态类型的JavaScript超集，常用于大型项目以提供更强的类型检查和更好的开发者体验。 要配置Vite和TypeScript的打包过程，首先需要安装必要的依赖。假设你已经全局安装了`npm`或`yarn`，可以这样做： 1. 安装Vite：运行 `npm install -g create-vite` 或 `yarn global add create-vite` 2. 创建新项目：`vite create my-project`，选择默认选项，或指定`--template typescript`来使用TypeScript模板。 然后进入项目目录并初始化项目： ``` cd my-project npm install // 或 yarn ``` 接下来，在`vite.config.ts`文件中配置支持TypeScript： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { target: 'esnext', // 指定目标环境 transpileDependencies: true, // 允许编译第三方库 tsconfigOverride: { compilerOptions: { module: 'ESNext' }}, // 配置TypeScript编译选项 }, }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

★雨 潇★

谢谢您的鼓励，我会继续努力的~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值