親測有效。

1.首先安裝 npm i webpack-obfuscator -D 與 npm i compression-webpack-plugin -D

2.打開vue.config.js 文件，如沒有在項目根目錄新建，粘貼以下內容，已經加上注釋

let CompressionPlugin = require("compression-webpack-plugin"); const JavaScriptObfuscator = require('webpack-obfuscator'); const encryption = true; // 打包后的代碼是否加密module.exports = {publicPath: '/', // //基本路徑outputDir: 'dist', //打包的時候生成的一個文件名assetsDir: 'assets', //靜態資源目錄(js,css,img,fonts)這些文件都可以寫里面productionSourceMap: false, //生產環境是否生成 sourceMap 文件，一般情況不建議打開// 顯式轉義依賴transpileDependencies: ['webpack-dev-server/client'],chainWebpack: config => {// 指定入口 es6轉es5config.entry.app = ['babel-polyfill', './src/main.js'];},runtimeCompiler: true,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, //是否開啟協議名,如果開啟會發出警告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$|\.jpgthreshold: 10240, //對超過10k的數據壓縮deleteOriginalAssets: false //不刪除原文件}),//js代碼加密new JavaScriptObfuscator({rotateUnicodeArray: true, // 必須為truecompact: true, // 緊湊 從輸出混淆代碼中刪除換行符。controlFlowFlattening: false, // 此選項極大地影響了運行速度降低1.5倍的性能。 啟用代碼控制流展平。控制流扁平化是源代碼的結構轉換，阻礙了程序理解。controlFlowFlatteningThreshold: 0.8,deadCodeInjection: true, // 此選項大大增加了混淆代碼的大小（最多200％） 此功能將隨機的死代碼塊（即：不會執行的代碼）添加到混淆輸出中，從而使得更難以進行反向工程設計。deadCodeInjectionThreshold: 0.5,debugProtection: true, // 調試保護 如果您打開開發者工具，可以凍結您的瀏覽器。 debugProtectionInterval: true, // 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，這使得使用“開發人員工具”的其他功能變得更加困難。它是如何工作的？一個調用調試器的特殊代碼;在整個混淆的源代碼中反復插入。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: false, // 此選項可能會略微降低腳本速度。使用Base64或RC4對stringArray的所有字符串文字進行編碼，并插入一個特殊的函數，用于在運行時將其解碼回來。stringArrayThreshold: 0.8, // 您可以使用此設置調整字符串文字將插入stringArray的概率（從0到1）。此設置在大型代碼庫中很有用，因為對stringArray函數的重復調用會降低代碼的速度。target: 'browser', // 您可以將混淆代碼的目標環境設置為以下之一： Browser 、Browser No Eval 、Node 目前瀏覽器和節點的輸出是相同的。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$|\.jpgthreshold: 10240, //對超過10k的數據壓縮deleteOriginalAssets: false //不刪除原文件}),],}};//2019.8.30//解決：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>)config.resolve = {extensions: ['.js', '.vue', '.json', ".css"],alias: {'vue$': 'vue/dist/vue.esm.js'}};}, }

總結

以上是生活随笔為你收集整理的vue js代码混淆加密、压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。