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