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

★雨潇★

已于 2024-02-28 11:20:19 修改

阅读量1k

点赞数 6

分类专栏： Vue.js 文章标签： javascript vue.js 安全

于 2024-02-28 11:18:54 首次发布

本文链接：https://blog.csdn.net/yasyList/article/details/136340983

版权

Vue.js 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue项目中通过cnpm安装并配置javascript-obfuscator，对打包后的JS文件进行加密处理，同时给出了package.json中的相关script配置和实际操作步骤。

摘要由CSDN通过智能技术生成

安装 javascript-obfuscator

cnpm i javascript-obfuscator -D

这里我使用命令行对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飞车，可一起来玩玩鸭~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

★雨潇★

关注关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Vite+Ts】打包使用js混淆加密

【Vite+Ts】打包使用js混淆加密
复制链接

扫一扫

专栏目录

vite打包编译后类名混淆冲突问题处理

lj1530562965的博客

12-30

7807

vite打包编译后类名混淆冲突问题处理背景在项目开发过程中，发现同个views引用的不同stora打包编译后的类名偶发性存在一致的情况，都为n，导致类名冲突解决方案类名不进行打包混淆处理，防止丢弃或修改类名找到vite官网发现有terserOptions的配置，于是增加terserOptions配置，配置如下： build: { minify: 'esbuild', // 进行压缩计算 brotliSize: false, outDir: e

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+...

1 条评论您还未登录，请先登录后发表或查看评论

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: {

Vite实现JS混淆加密

热门推荐

编码世界

10-23

5万+

关于代码混淆网上案例铺天盖地，90%以上都是`Webpack`相关来处理代码混淆，对于`Vite`的案例少之又少，在解决vite项目代码混淆我花了一些时间来找合适的插件区处理这个问题，最终选择`rollup-plugin-obfuscator`。另外第四章节介绍了`Webpack` 处理代码混淆方案。

vue3+ts+vite+router+vuex+api请求封装

12-29

Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...

vite+vue3使用模块化批量发布Mockjs接口

03-29

在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...

uniapp + vue3 +vite + ts + pinia 框架模板

01-31

标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...

Vue3+Pinia+Vite+TS 还原高性能外卖APP项目完结10章

01-15

大家好，今天我将带着大家用Vue3+Pinia+Vite+TS来开发一款外卖app的项目，喜欢大家会喜欢。随着外卖服务的普及和数字化的兴起，外卖系统的开发变得至关重要。要构建一个高效、安全、用户友好的外卖系统，需要运用...

vue项目配置 webpack-obfuscator 进行代码加密混淆

chinaherolts2008的博客

02-25

3076

背景公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置 // w

vue代码打包发布时混淆加密

m0_61452987的博客

06-29

7704

vue 代码混淆加密压缩 - 简书 (jianshu.com)1、安装插件： 2、在 vue.config 文件中配置： 3、重新打包发布： 4、如果有遇到报错清空，大概率是遇到es6语法导致无法压缩。解决方法有很多，最简单的就是更改uglifyjs版本。...

在NodeJS中使用npm包实现JS代码混淆加密

w2sft的博客

10-24

550

混淆加密JS代码、提高JS代码安全性，防止他人随意查看、复制

vue3项目打包附带混淆js

954L

02-15

2136

使用打包插件：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

1151

本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！

Vue js混淆加密 webpack-obfuscator

weixin_44911525的博客

01-13

2800

Vue js混淆加密 webpack-obuscator

你把 vite打包玩明白

技术前端，忠于热爱 @0.活在风浪里

08-02

1万+

webpack 打包看这里（移动端打包）一步一步,一步从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包成app一步一步,一步从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)手写一个服务器代码将《vue电商后台管理系统》部署上去上线、打包_0.活在风浪里的博客-CSDN博客亲测可用，一定会收获颇多，1.上线vue电商后台管理项目2.手写搭建服务器并挂载（node）3.打包优化完成上线。.............

vue3+vite+ts中使用$refs

11-02

在Vue3 + Vite + Ts中，使用$refs需要注意以下几点： 1. 在模板中使用ref属性来定义一个DOM元素的引用，例如：`<div ref="myDiv"></div>` 2. 在组件中使用`@setup`来定义一个ref，例如：`const myRef = ref(null);` 3. 在组件中使用`onMounted`生命周期函数来获取$refs，例如：`const myDiv = toRef(this.$refs, 'myDiv');` 4. 如果需要在`onMounted`之前获取$refs，可以使用`nextTick`函数，例如：`nextTick(() => { const myDiv = toRef(this.$refs, 'myDiv'); });` 5. 如果在`onMounted`之外获取$refs，会得到一个空对象，因为此时DOM元素还没有被渲染出来。