vite3+vue3 实现前端部署加密混淆 javascript-obfuscator

安装

pnpm install javascript-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([obfuscator] 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([obfuscator] 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(`[obfuscator] file done ${ it.fileName }`)
        resolve(1)
    })
}))).then(() => {
    console.log(`[obfuscator] 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即可解决