mounting
pnpm install javascript-obfuscator
After installation, create a new
In the Write the following code directly copy and paste
`
/**
- @Usage
- Once vite is packaged, use the command line nodejs to execute this file: node
- It will obfuscate and replace the js files one by one.
- @Description
- Essentially relying on this tool
- The underlying implementation is to throw all the code as a string at it, and it internally calls other packages to analyze the syntax and do obfuscated replacements
- @doc /javascript-obfuscator/javascript-obfuscator
- @Expansion
- There are also plugins for webpack and for rollup (which is what vite uses for packaging).
- Implementation is relatively simple, if necessary, you can also find their own requirements of the plugin or write their own, in essence, is the execution of this file is automatically appended to the packaging process
*/
const JavaScriptObfuscator = require('javascript-obfuscator')
const fs = require('fs')
// Configuration
const buildDir = './dist/assets/'
/**
-
Get all js files in the directory and their content strings
-
@result {fileName:string, content:string}[]
*/
const getJsFileList = (dir) => new Promise((resolve) => {
(dir, (err, files) => {
if (err) return reject([obfuscator] output dir not exist!)return resolve(((fileName => ('.js')).map(fileName => new Promise(resolveInner => { (dir + fileName, (err, data) => { return resolveInner({ fileName, content: () }) }) }))))})
})
getJsFileList(buildDir).then(list => {
([obfuscator] start)
((it => new Promise(resolve => {
()
const obfuscationResult = (, {
/** These are the configurations */
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
})
(buildDir + , (), () => {
(`[obfuscator] file done ${ }`)
resolve(1)
})
}))).then(() => {
(`[obfuscator] finished`)
})
})
`
Currently only configured to execute the script, if you want to encrypt the first package project execution pnpm build, after the end of the package through the node command to execute the script node. After successful execution, you will be prompted
At this point, the contents of the assets folder in the dist directory have been encrypted. You can deploy directly to nginx.
Common Errors:
Description of the problem
After packaging the project and uploading it to nginx, the browser accesses it and the following error message appears:
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
This error message means that a module script was used in the page, but the server returned a MIME type of "text/html" instead of JavaScript. According to the HTML specification, strict MIME type checking is enforced for module scripts.
Change the base in the vite configuration to '/', mine was / before. After changing the configuration according to the following, repackage and deploy, restart nginx can be solved
