vue-cli脚手架对js全加密

新建一个配置文件

JsEncodePlugin.js

// 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’, function (compilation, callback) {
// … 内部进行自定义的编译操作
// 5、操作 compilation 对象的内部数据
console.log(chalk.cyan(’\n jsencode start.\n’))
var filePath = path.resolve(dirname, _this.options.assetsPath);//设置需要加密的js文件路径，_this.options.assetsPath为插件配置中传过来的需要加密的js文件路径
filterFile(filePath);
function filterFile(fp){
fs.readdir(fp, (err, files)=>{//读取该文件路径
if(err){
console.log(chalk.yellow(
‘读取js文件夹异常：\n’ +
err.message + ‘\n’
))
return;
}
files.forEach((filename)=>{//遍历该路径下所有文件
if(_this.options.jsReg.test(filename)){//利用正则匹配我们要加密的文件,this.options.jsReg为插件中传过来的需要加密的js文件正则，用以筛选出我们需要加密的js文件。
var filedir = path.resolve(fp, filename);
fs.readFile(filedir, ‘utf-8’, (err, data)=>{//读取文件源码
if(err){
console.log(chalk.yellow(
‘读取js文件异常：\n’ +
err.message + ‘\n’
))
return;
}
//调用jjencode函数对源码进行jjencode加密，this.options.global为插件配置中传过来的加密使用的全局变量名，将在jjencode函数中作为第一个参数传入
let result = jjencode(this.options.global, data);
fs.writeFile(filedir, result, (err)=>{//将加密后的代码写回文件中
if(err){
console.log(chalk.yellow(
‘写入加密后的js文件异常：\n’ +
err.message + ‘\n’
))
return;
}
console.log(chalk.cyan(’ jsencode complete.\n’))
})
})
}
})
})
}
//js加密函数
function jjencode( gv, text )
{
var r="";
var n;
var t;
var b=[ "", "KaTeX parse error: Expected group after '_' at position 5: ", "_̲", “KaTeX parse error: Can't use function '$' in math mode at position 5: ", "$̲__", "$_$", "”, “$KaTeX parse error: Can't use function '$' in math mode at position 5: ", "$̲___", "$__$", "…”, “KaTeX parse error: Expected group after '_' at position 1: _̲_", "$","$$${}_{"},"$$$KaTeX parse error: Expected '}', got '&' at position 311: …if( (0x20 <= n &̲& n <= 0x2f) ||…]+”;
s = “”;
}else if( n == 0x6f ){ // ‘o’
if( s ) r += “”" + s + “”+";
r += gv + “.$+";
s = “”;
}else if( n == 0x74 ){ // ‘u’
if( s ) r += “”" + s + “”+";
r += gv + “.__+”;
s = “”;
}else if( n == 0x75 ){ // ‘u’
if( s ) r += “”" + s + “”+";
r += gv + ".+”;
s = “”;
}else if( n < 128 ){
if( s ) r += “”" + s;
else r += “”";
r += “\\”+" + n.toString( 8 ).replace( /[0-7]/g, function©{ return gv + “.”+b[ c ]+"+" } );
s = “”;
}else{
if( s ) r += “”" + s;
else r += “”";
r += “\\”+" + gv + “._+” + n.toString(16).replace( /[0-9a-f]/gi, function©{ return gv + “.”+b[parseInt(c,16)]+"+"} );
s = “”;
}
}
if( s ) r += “”" + s + “”+";

              r = 
              gv + "=~[];" + 
              gv + "={___:++" + gv +",$$$$:(![]+\"\")["+gv+"],__$:++"+gv+",$_$_:(![]+\"\")["+gv+"],_$_:++"+
              gv+",$_$$:({}+\"\")["+gv+"],$$_$:("+gv+"["+gv+"]+\"\")["+gv+"],_$$:++"+gv+",$$$_:(!\"\"+\"\")["+
              gv+"],$__:++"+gv+",$_$:++"+gv+",$$__:({}+\"\")["+gv+"],$$_:++"+gv+",$$$:++"+gv+",$___:++"+gv+",$__$:++"+gv+"};"+
              gv+".$_="+
              "("+gv+".$_="+gv+"+\"\")["+gv+".$_$]+"+
              "("+gv+"._$="+gv+".$_["+gv+".__$])+"+
              "("+gv+".$$=("+gv+".$+\"\")["+gv+".__$])+"+
              "((!"+gv+")+\"\")["+gv+"._$$]+"+
              "("+gv+".__="+gv+".$_["+gv+".$$_])+"+
              "("+gv+".$=(!\"\"+\"\")["+gv+".__$])+"+
              "("+gv+"._=(!\"\"+\"\")["+gv+"._$_])+"+
              gv+".$_["+gv+".$_$]+"+
              gv+".__+"+
              gv+"._$+"+
              gv+".$;"+
              gv+".$$="+
              gv+".$+"+
              "(!\"\"+\"\")["+gv+"._$$]+"+
              gv+".__+"+
              gv+"._+"+
              gv+".$+"+
              gv+".$$;"+
              gv+".$=("+gv+".___)["+gv+".$_]["+gv+".$_];"+
              gv+".$("+gv+".$("+gv+".$$+\"\\\"\"+" + r + "\"\\\"\")())();";
              //console.log(r);
              return r;
          }
    // 6、执行 callback 回调
    callback();
});

};
// 暴露 js 函数
module.exports =JsEncodePlugin;

在webpack.prod.conf文件中

new JsEncodePlugin({
global: 'KaTeX parse error: Can't use function '\.' in math mode at position 32: … jsReg: /^app\̲.̲.+\.js/, // 需要加密的js文件
assetsPath: ‘dist/js’ // 加密后的js文件存放路径
})

运行 npm run build ，基本上你js代码完全不可读，最后在禁止打开控制台，js客户端安全性就ok了，不会让别人那么轻易的读懂。