一文詳解如何在vue.config.js配置代碼混淆加密、壓縮
更新時(shí)間：2025年05月09日 11:36:16 作者：??小武??
這篇文章主要介紹了如何在vue.config.js配置代碼混淆加密、壓縮的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
前言
在Vue項(xiàng)目中防止代碼被反編譯是一個(gè)挑戰(zhàn)，因?yàn)镴avaScript是一種解釋型語(yǔ)言，它的源碼很容易被查看或反編譯。但是，你可以采取一些措施來(lái)增加反編譯的難度：
1、使用Webpack的UglifyJsPlugin插件進(jìn)行代碼混淆。
2、使用JavaScript混淆器，如js-obfuscator。
3、使用環(huán)境變量和條件編譯來(lái)在不同環(huán)境下使用不同的代碼。
4、將核心邏輯通過(guò)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、打開(kāi)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)頁(yè)標(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)會(huì)讓 npm 忽略 peer dependencies 的版本沖突，可以使用以下命令來(lái)安裝：
npm i webpack-obfuscator -D --legacy-peer-deps
或者使用 --force 選項(xiàng)，這個(gè)選項(xiàng)會(huì)讓 npm 忽略所有的版本沖突并強(qiáng)制安裝。
npm i webpack-obfuscator -D --force
注：可以使用 npm list webpack 查詢(xún)項(xiàng)目依賴(lài)的webpack，Webpack@5以上版本
2、打開(kāi)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)頁(yè)標(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, //是否開(kāi)啟eslint保存檢測(cè) ,它的有效值為 true || false || 'error'
devServer: {
// open:true,//啟動(dòng)項(xiàng)目后自動(dòng)開(kāi)啟瀏覽器
port: 8080, //端口號(hào)
host: '0.0.0.0',
disableHostCheck: true,
https: false, //是否開(kāi)啟協(xié)議名,如果開(kāi)啟會(huì)發(fā)出警告
hotOnly: false, //熱模塊更新的一種東西,webpack中自動(dòng)有過(guò)配置,但如果我們下載一些新 的模塊可以更好的給我更新一些配置
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, //對(duì)超過(guò)10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false //不刪除原文件
}),
//js代碼加密
new JavaScriptObfuscator({
rotateUnicodeArray: true, // 必須為true
compact: true, // 緊湊 從輸出混淆代碼中刪除換行符。
controlFlowFlattening: false, // 此選項(xiàng)極大地影響了運(yùn)行速度降低1.5倍的性能。 啟用代碼控制流展平。控制流扁平化是源代碼的結(jié)構(gòu)轉(zhuǎn)換，阻礙了程序理解。
controlFlowFlatteningThreshold: 0.8,
deadCodeInjection: true, // 此選項(xiàng)大大增加了混淆代碼的大?。ㄗ疃?00％） 此功能將隨機(jī)的死代碼塊（即：不會(huì)執(zhí)行的代碼）添加到混淆輸出中，從而使得更難以進(jìn)行反向工程設(shè)計(jì)。
deadCodeInjectionThreshold: 0.5,
debugProtection: true, // 調(diào)試保護(hù) 如果您打開(kāi)開(kāi)發(fā)者工具，可以?xún)鼋Y(jié)您的瀏覽器。
debugProtectionInterval: 1000, // 如果選中，則會(huì)在“控制臺(tái)”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，這使得使用“開(kāi)發(fā)人員工具”的其他功能變得更加困難。它是如何工作的？一個(gè)調(diào)用調(diào)試器的特殊代碼;在整個(gè)混淆的源代碼中反復(fù)插入。
disableConsoleOutput: true, // 通過(guò)用空函數(shù)替換它們來(lái)禁用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)行，請(qǐng)使用.example.com。
identifierNamesGenerator: 'hexadecimal', // 使用此選項(xiàng)可控制標(biāo)識(shí)符（變量名稱(chēng)，函數(shù)名稱(chēng)等）的混淆方式。
identifiersPrefix: '', // 此選項(xiàng)使所有全局標(biāo)識(shí)符都具有特定前綴。
inputFileName: '',
log: false,
renameGlobals: false, // 不要啟動(dòng) 通過(guò)聲明啟用全局變量和函數(shù)名稱(chēng)的混淆。
reservedNames: [], // 禁用模糊處理和生成標(biāo)識(shí)符，這些標(biāo)識(shí)符與傳遞的RegExp模式匹配。例如，如果添加^ someName，則混淆器將確保以someName開(kāi)頭的所有變量，函數(shù)名和函數(shù)參數(shù)都不會(huì)被破壞。
reservedStrings: [], // 禁用字符串文字的轉(zhuǎn)換，字符串文字與傳遞的RegExp模式匹配。例如，如果添加^ some * string，則混淆器將確保以某些字符串開(kāi)頭的所有字符串都不會(huì)移動(dòng)到`stringArray`。
rotateStringArray: true, //
seed: 0, // 默認(rèn)情況下（seed = 0），每次混淆代碼時(shí)都會(huì)得到一個(gè)新結(jié)果（即：不同的變量名，插入stringArray的不同變量等）。如果需要可重復(fù)的結(jié)果，請(qǐng)將種子設(shè)置為特定的整數(shù)。
selfDefending: false, // 此選項(xiàng)使輸出代碼能夠抵抗格式化和變量重命名。如果試圖在混淆代碼上使用JavaScript美化器，代碼將不再起作用，使得理解和修改它變得更加困難。需要緊湊代碼設(shè)置。
sourceMap: false, // 請(qǐng)確保不要上傳嵌入了內(nèi)嵌源代碼的混淆源代碼，因?yàn)樗荚创a。源映射可以幫助您調(diào)試混淆的Java Script源代碼。如果您希望或需要在生產(chǎn)中進(jìn)行調(diào)試，可以將單獨(dú)的源映射文件上載到秘密位置，然后將瀏覽器指向該位置。
sourceMapBaseUrl: '', // 這會(huì)將源的源映射嵌入到混淆代碼的結(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)可能會(huì)略微降低腳本速度。使用Base64或RC4對(duì)stringArray的所有字符串文字進(jìn)行編碼，并插入一個(gè)特殊的函數(shù)，用于在運(yùn)行時(shí)將其解碼回來(lái)。
stringArrayThreshold: 0.8, // 您可以使用此設(shè)置調(diào)整字符串文字將插入stringArray的概率（從0到1）。此設(shè)置在大型代碼庫(kù)中很有用，因?yàn)閷?duì)stringArray函數(shù)的重復(fù)調(diào)用會(huì)降低代碼的速度。
target: 'browser', // 您可以將混淆代碼的目標(biāo)環(huán)境設(shè)置為以下之一： Browser 、Browser No Eval 、Node 目前瀏覽器和節(jié)點(diǎn)的輸出是相同的。
transformObjectKeys: false, // 轉(zhuǎn)換（混淆）對(duì)象鍵。例如，此代碼var a = {enabled：true};使用此選項(xiàng)進(jìn)行模糊處理時(shí)，將隱藏已啟用的對(duì)象鍵：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, //對(duì)超過(guò)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解Vue3中對(duì)VDOM的改進(jìn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue2.0 事件的廣播與接收(觀察者模式)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
下面小編就為大家分享一篇Vue用v-for給src屬性賦值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器
這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級(jí)聯(lián)選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue使用Element el-upload 組件的相關(guān)知識(shí)，在研究學(xué)習(xí)基本使用的過(guò)程中遇到很多問(wèn)題，今天特此把問(wèn)題記錄分享到腳本之家平臺(tái),需要的朋友可以參考下2021-09-09
開(kāi)發(fā)vue項(xiàng)目的時(shí)候一般都會(huì)開(kāi)發(fā)很多自定義的全局組件,下面這篇文章主要給大家總結(jié)介紹了關(guān)于VUE中常用的四種高級(jí)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue項(xiàng)目中封裝組件的簡(jiǎn)單步驟記錄
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對(duì)其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue-print如何實(shí)現(xiàn)打印功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法
今天小編就為大家分享一篇基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09