vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
安装pnpm installjavascript-obfuscator
安装之后 在项目根目录新建一个 obfuscator.js
在obfuscator.js 写入以下代码 直接复制粘贴
`
/**
[*]@用法
[*]vite打包完成后，使用命令行nodejs执行本文件: node obfuscator.js
[*]它会挨个把里面的js文件做混淆然后替换
[*]
[*]@说明
[*]本质就是依赖这个工具
[*]底层实现就是把代码全部作为一个字符串丢给它，它内部调用其他包来分析语法，做混淆替换
[*]
[*]@doc https://github.com/javascript-obfuscator/javascript-obfuscator
[*]
[*]@拓展
[*]obfuscator.js也有对应 webpack 的 plugin 和 rollup（vite打包用的就是rollup） 的 plugin
[*]实现起来比较简单，如有需要也可以自己找符合要求的plugin或者自己写一个，本质上就是把这个文件的执行过程自动追加到打包过程中
*/
const JavaScriptObfuscator = require('javascript-obfuscator')
const fs = require('fs')
// 配置
const buildDir = './dist/assets/'
/**
[*]获取目录下所有js文件及内容字符串
[*]@result {fileName:string, content:string}[]
*/
const getJsFileList = (dir) => new Promise((resolve) => {
fs.readdir(dir, (err, files) => {
if (err) return reject( output dir not exist!)
return resolve(Promise.all(files.filter(fileName => fileName.endsWith('.js')).map(fileName => new Promise(resolveInner => {
fs.readFile(dir + fileName, (err, data) => {
return resolveInner({ fileName, content: data.toString() })
})
}))))})
})
getJsFileList(buildDir).then(list => {
console.log( start)
Promise.all(list.map(it => new Promise(resolve => {
console.log(it.fileName)
const obfuscationResult = JavaScriptObfuscator.obfuscate(it.content, {
/** 这些都是配置 */
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
})
fs.writeFile(buildDir + it.fileName, obfuscationResult.getObfuscatedCode(), () => {
console.log(` file done ${ it.fileName }`)
resolve(1)
})
}))).then(() => {
console.log(` finished`)
})})
`
目前只是配置好了要执行的脚本，如若要加密 先打包项目 执行pnpm build，打包结束后通过node命令执行脚本 node obfuscator.js。执行成功后会有提示
这时候dist目录下的assets文件夹内容已经加密完成。可直接部署到nginx。
常见错误：
问题描述
打包好项目发布上传到 nginx 后，浏览器访问，出现一下报错信息：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec
这个错误提示的意思是：网页中使用了模块脚本（module script），但服务器返回的 MIME 类型是 “text/html”，而不是 JavaScript 类型。根据 HTML 规范，严格的 MIME 类型检查会对模块脚本进行强制执行。
将vite配置中 base 改为 '/',我的之前是 /。按照以下配置改完后重新打包部署，重启nginx即可解决
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]