admin管理员组

文章数量:1639833

一。最近收到一个对js源码进行加密，以防止关键js源代码泄露的需求！由于我们的项目是基于vue-cli脚手架开发的，因此首先想到的是其中的webpack插件UglifyJsPlugin是否提供js代码加密的配置。查询UglifyJsPlugin官方手册后发现该插件提供代码压缩及混淆功能，可以对代码进行压缩，变量、函数名替换为简单字母，降低了源码的可读性，一定程度上达到了加密的目的，但是加密级别没有达到我们的要求。因此只能亲自动手找找是否有现成的开源加密算法，拿过来借用一下。

二。在网上找到了一个名为'jjencode'的js加密算法，这里贴出他的网站：https://www.sojson/jjencode.html，通过此算法对js加密后台代码如下图：


可以看到加密后已经根本看不出任何js语言的痕迹，更不可能看出其中的具体算法是什么，这种的加密级别基本已经符合我们的需求了。问题来了，加密算法虽然有了，但是我们不能每次重新打包后都手动加密代码后覆盖原文件，这使得加密流程变得繁琐，如果在每次打包后能够自动加密就好了。怎么样才能实现自动加密呢，这就需要我们手写一个自动加密的插件了。

三。如果对webpack的插件机制不了解的，可以参考这篇文章：https://juejin.im/entry/5a4cb7906fb9a04500037399。我将插件命名为'JsEncodePlugin',源码如下：

// 1、js-encode-plugin.js 文件（webpack的js加密插件）
const fs = require('fs');//node的文件系统模块，用于读写及操作文件
const path = require('path');//node提供的一些用于处理文件路径的小工具
var chalk = require('chalk')//用于向控制台输出带颜色的问题提示
// 2、模块对外暴露的 js 函数
function JsEncodePlugin(pluginOptions) {
  this.options = pluginOptions;
}
// 3、原型定义一个 apply 函数，并注入了 compiler 对象
JsEncodePlugin.prototype.apply = function (compiler) {
  const _this = this;
  // 4、挂载 webpack 事件钩子（这里挂载的是 after-emit 事件,在将内存中 assets 内容写到磁盘文件夹之后触发的webpack生命周期钩子）
  compiler.plugin('after-emit',

本文标签： 脚手架开发项目高级知识vue

版权声明：本文标题：【知识整理】vue-cli脚手架开发项目如何进行js高级加密 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729296517a1194787.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。