一文詳解如何在vue.config.js配置代碼混淆加密、壓縮
更新時(shí)間：2025年05月09日 11:36:16 作者：??小武??
這篇文章主要介紹了如何在vue.config.js配置代碼混淆加密、壓縮的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
前言
在Vue項(xiàng)目中防止代碼被反編譯是一個(gè)挑戰(zhàn)，因?yàn)镴avaScript是一種解釋型語言，它的源碼很容易被查看或反編譯。但是，你可以采取一些措施來增加反編譯的難度：
1、使用Webpack的UglifyJsPlugin插件進(jìn)行代碼混淆。
2、使用JavaScript混淆器，如js-obfuscator。
3、使用環(huán)境變量和條件編譯來在不同環(huán)境下使用不同的代碼。
4、將核心邏輯通過Web Workers或者第三方服務(wù)進(jìn)行隔離。
一、如何在Vue項(xiàng)目中使用UglifyJsPlugin插件進(jìn)行代碼混淆：
1、安裝UglifyJsPlugin插件（如果你使用的是Vue CLI 3或以下版本，可能需要安裝webpack和相關(guān)的webpack-cli）。
npm install uglifyjs-webpack-plugin --save-dev
2、打開vue.config.js 文件
'use strict'
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = process.env.VUE_APP_TITLE || 'VUE模板案例' // 網(wǎng)頁標(biāo)題
const port = process.env.port || process.env.npm_config_port || 9999 // 端口
module.exports = defineConfig({
transpileDependencies: false,
publicPath: "./",
outputDir: "dist",
assetsDir: "assets",
indexPath: "index.html",
// lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false, // 是否在構(gòu)建生產(chǎn)包時(shí)生成 sourceMap 文件，false將提高構(gòu)建速度
// webpack-dev-server 相關(guān)配置
devServer: {
// host: 'localhost',
port: port,
open: false,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:8848`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
// historyApiFallback: true,
// allowedHosts: "all",
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true, // 移除debugger
drop_console: true, // 移除console
pure_funcs: ['console.log'] // 移除console.log
},
},
sourceMap: false,
parallel: true, //使用多線程
})
);
}
config.resolve = {
name: name,
resolve: {
alias: {
'@': resolve('src')
},
},
};
}
});二、使用 webpack-obfuscator 插件進(jìn)行代碼混淆：
1、安裝 webpack-obfuscator 和 compression-webpack-plugin 插件
npm i webpack-obfuscator -D
npm i compression-webpack-plugin -D
如果安裝報(bào)錯(cuò)可以嘗試使用 --legacy-peer-deps 選項(xiàng)，這個(gè)選項(xiàng)會讓 npm 忽略 peer dependencies 的版本沖突，可以使用以下命令來安裝：
npm i webpack-obfuscator -D --legacy-peer-deps
或者使用 --force 選項(xiàng)，這個(gè)選項(xiàng)會讓 npm 忽略所有的版本沖突并強(qiáng)制安裝。
npm i webpack-obfuscator -D --force
注：可以使用 npm list webpack 查詢項(xiàng)目依賴的webpack，Webpack@5以上版本
2、打開vue.config.js 文件
const { defineConfig } = require('@vue/cli-service')
let CompressionPlugin = require("compression-webpack-plugin");
const JavaScriptObfuscator = require('webpack-obfuscator');
const encryption = true; // 打包后的代碼是否加密
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = process.env.VUE_APP_TITLE || 'VUE模板案例' // 網(wǎng)頁標(biāo)題
const port = process.env.port || process.env.npm_config_port || 9999 // 端口
module.exports = defineConfig({
transpileDependencies: false,
publicPath: "./",
outputDir: "dist",
assetsDir: "assets",
indexPath: "index.html",
// lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false, // 是否在構(gòu)建生產(chǎn)包時(shí)生成 sourceMap 文件，false將提高構(gòu)建速度
// webpack-dev-server 相關(guān)配置
devServer: {
// host: 'localhost',
port: port,
open: false,
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:8848`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
// historyApiFallback: true,
// allowedHosts: "all",
},
configureWebpack: config => {
if (process.env.NODE_ENV == 'development') {
module.exports = {
lintOnSave: false, //是否開啟eslint保存檢測 ,它的有效值為 true || false || 'error'
devServer: {
// open:true,//啟動項(xiàng)目后自動開啟瀏覽器
port: 8080, //端口號
host: '0.0.0.0',
disableHostCheck: true,
https: false, //是否開啟協(xié)議名,如果開啟會發(fā)出警告
hotOnly: false, //熱模塊更新的一種東西,webpack中自動有過配置,但如果我們下載一些新 的模塊可以更好的給我更新一些配置
proxy: {
//配置跨域
'/api': { //配置跨域的名字
target: ' https://xxx.xxx/api', //跨域的地址
changOrigin: true, //是否跨域
pathRewrite: { //當(dāng)前的名字
'^/api': ''
}
}
}
}
};
}
if (process.env.NODE_ENV === 'production' && encryption == true) {
return {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', //'brotliCompress'
test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
threshold: 10240, //對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false //不刪除原文件
}),
//js代碼加密
new JavaScriptObfuscator({
rotateUnicodeArray: true, // 必須為true
compact: true, // 緊湊 從輸出混淆代碼中刪除換行符。
controlFlowFlattening: false, // 此選項(xiàng)極大地影響了運(yùn)行速度降低1.5倍的性能。 啟用代碼控制流展平?？刂屏鞅馄交窃创a的結(jié)構(gòu)轉(zhuǎn)換，阻礙了程序理解。
controlFlowFlatteningThreshold: 0.8,
deadCodeInjection: true, // 此選項(xiàng)大大增加了混淆代碼的大?。ㄗ疃?00％） 此功能將隨機(jī)的死代碼塊（即：不會執(zhí)行的代碼）添加到混淆輸出中，從而使得更難以進(jìn)行反向工程設(shè)計(jì)。
deadCodeInjectionThreshold: 0.5,
debugProtection: true, // 調(diào)試保護(hù) 如果您打開開發(fā)者工具，可以凍結(jié)您的瀏覽器。
debugProtectionInterval: 1000, // 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，這使得使用“開發(fā)人員工具”的其他功能變得更加困難。它是如何工作的？一個(gè)調(diào)用調(diào)試器的特殊代碼;在整個(gè)混淆的源代碼中反復(fù)插入。
disableConsoleOutput: true, // 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
domainLock: [], // 鎖定混淆的源代碼，使其僅在特定域和/或子域上運(yùn)行。這使得有人只需復(fù)制并粘貼源代碼并在別處運(yùn)行就變得非常困難。多個(gè)域和子域可以將代碼鎖定到多個(gè)域或子域。例如，要鎖定它以使代碼僅在www.example.com上運(yùn)行添加www.example.com，以使其在example.com的任何子域上運(yùn)行，請使用.example.com。
identifierNamesGenerator: 'hexadecimal', // 使用此選項(xiàng)可控制標(biāo)識符（變量名稱，函數(shù)名稱等）的混淆方式。
identifiersPrefix: '', // 此選項(xiàng)使所有全局標(biāo)識符都具有特定前綴。
inputFileName: '',
log: false,
renameGlobals: false, // 不要啟動 通過聲明啟用全局變量和函數(shù)名稱的混淆。
reservedNames: [], // 禁用模糊處理和生成標(biāo)識符，這些標(biāo)識符與傳遞的RegExp模式匹配。例如，如果添加^ someName，則混淆器將確保以someName開頭的所有變量，函數(shù)名和函數(shù)參數(shù)都不會被破壞。
reservedStrings: [], // 禁用字符串文字的轉(zhuǎn)換，字符串文字與傳遞的RegExp模式匹配。例如，如果添加^ some * string，則混淆器將確保以某些字符串開頭的所有字符串都不會移動到`stringArray`。
rotateStringArray: true, //
seed: 0, // 默認(rèn)情況下（seed = 0），每次混淆代碼時(shí)都會得到一個(gè)新結(jié)果（即：不同的變量名，插入stringArray的不同變量等）。如果需要可重復(fù)的結(jié)果，請將種子設(shè)置為特定的整數(shù)。
selfDefending: false, // 此選項(xiàng)使輸出代碼能夠抵抗格式化和變量重命名。如果試圖在混淆代碼上使用JavaScript美化器，代碼將不再起作用，使得理解和修改它變得更加困難。需要緊湊代碼設(shè)置。
sourceMap: false, // 請確保不要上傳嵌入了內(nèi)嵌源代碼的混淆源代碼，因?yàn)樗荚创a。源映射可以幫助您調(diào)試混淆的Java Script源代碼。如果您希望或需要在生產(chǎn)中進(jìn)行調(diào)試，可以將單獨(dú)的源映射文件上載到秘密位置，然后將瀏覽器指向該位置。
sourceMapBaseUrl: '', // 這會將源的源映射嵌入到混淆代碼的結(jié)果中。如果您只想在計(jì)算機(jī)上進(jìn)行本地調(diào)試，則非常有用。
sourceMapFileName: '',
sourceMapMode: 'separate',
stringArray: true, // 將stringArray數(shù)組移位固定和隨機(jī)（在代碼混淆時(shí)生成）的位置。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。
stringArrayEncoding: ['base64'], // 此選項(xiàng)可能會略微降低腳本速度。使用Base64或RC4對stringArray的所有字符串文字進(jìn)行編碼，并插入一個(gè)特殊的函數(shù)，用于在運(yùn)行時(shí)將其解碼回來。
stringArrayThreshold: 0.8, // 您可以使用此設(shè)置調(diào)整字符串文字將插入stringArray的概率（從0到1）。此設(shè)置在大型代碼庫中很有用，因?yàn)閷tringArray函數(shù)的重復(fù)調(diào)用會降低代碼的速度。
target: 'browser', // 您可以將混淆代碼的目標(biāo)環(huán)境設(shè)置為以下之一： Browser 、Browser No Eval 、Node 目前瀏覽器和節(jié)點(diǎn)的輸出是相同的。
transformObjectKeys: false, // 轉(zhuǎn)換（混淆）對象鍵。例如，此代碼var a = {enabled：true};使用此選項(xiàng)進(jìn)行模糊處理時(shí)，將隱藏已啟用的對象鍵：var a = {};a [_0x2ae0 [（'0x0'）] = true;。 理想情況下與String Array設(shè)置一起使用。
unicodeEscapeSequence: true, // 將所有字符串轉(zhuǎn)換為其unicode表示形式。例如，字符串“Hello World！”將被轉(zhuǎn)換為“'\ x48 \ x65 \ x6c \ x6c \ x6f \ x20 \ x57 \ x6f \ x72 \ x6c \ x64 \ x21”。
}, ['abc.js']) // abc.js 是不混淆的代碼
],
}
};
if (process.env.NODE_ENV === 'production' && encryption == false) {
return {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', //'brotliCompress'
test: /\.js$|\.html$|\.css/, // + $|\.svg$|\.png$|\.jpg
threshold: 10240, //對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false //不刪除原文件
}),
],
}
};
config.resolve = {
name: name,
resolve: {
alias: {
'@': resolve('src')
},
},
};
},
});總結(jié)
到此這篇關(guān)于如何在vue.config.js配置代碼混淆加密、壓縮的文章就介紹到這了,更多相關(guān)vue.config.js配置代碼混淆加密壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ElementUI?組件之Layout布局(el-row、el-col)
這篇文章主要介紹了ElementUI?組件之Layout布局(el-row、el-col),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue中使用event.target.value踩坑記錄,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
這篇文章主要介紹了vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置，本文通過實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-11-11
Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟
vue中網(wǎng)頁圖標(biāo)默認(rèn)使用的是vue自帶的一個(gè)icon的圖標(biāo),也是vue的logo,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置瀏覽器小圖標(biāo)(ICON)的詳細(xì)步驟,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue父子組件進(jìn)行通信方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
配置vite.confgi.ts無法使用require問題以及解決
這篇文章主要介紹了配置vite.confgi.ts無法使用require問題以及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼，風(fēng)格包括js, java, php, c++等等100多種語言，下面這篇文章主要來和大家講講CodeMirror的應(yīng)用，感興趣的可以了解一下2023-06-06
安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問題及解決
這篇文章主要介紹了安裝@vue/cli報(bào)錯(cuò)npmERR gyp ERR問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12