vue.js - Vue混淆最佳实践

Question

你好，开发社区。
我正在尝试使用 ( https://github.com/javascript-obfuscator/webpack-obfuscator ) webpack-obfuscator 混淆 Vue 应用程序
vue.config.js

configureWebpack: {
    plugins: [
      new JavaScriptObfuscator({})
    ],

但是 chrome 控制台输出显示了很多错误并且应用程序损坏了(根本就没有显示登录页面)

我也尝试过( https://github.com/javascript-obfuscator/obfuscator-loader )使用以下构建配置 ->
vue.config.js

const obfuscatorOptions = {
  compact: true,
  controlFlowFlattening: false,
  controlFlowFlatteningThreshold: 0.75,
  deadCodeInjection: true,
  deadCodeInjectionThreshold: 0.4,
  debugProtection: true,
  debugProtectionInterval: true,
  disableConsoleOutput: true,
  domainLock: [],
  identifierNamesGenerator: 'hexadecimal',
  identifiersPrefix: '',
  inputFileName: '',
  log: false,
  renameGlobals: true,
  reservedNames: [],
  reservedStrings: [],
  rotateStringArray: true,
  seed: 0,
  selfDefending: true,
  sourceMap: false,
  sourceMapBaseUrl: '',
  sourceMapFileName: '',
  sourceMapMode: 'separate',
  stringArray: true,
  stringArrayEncoding: true,
  stringArrayThreshold: 0.75,
  target: 'browser',
  transformObjectKeys: true,
  unicodeEscapeSequence: false
}

module: {
      rules: [
        {
          test: /\.js$/,
          include: [ path.resolve(__dirname, "./src") ],
          enforce: 'post',
          use: { loader: 'obfuscator-loader', options: obfuscatorOptions }
        },
      ]
    }

但控制台打印以下错误

Uncaught Error: Module build failed (from ./node_modules/obfuscator-loader/lib/index.js):
Error: Cannot apply @injectable decorator multiple times.
    at E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\inversify\lib\annotation\injectable.js:8:19
    at DecorateConstructor (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\reflect-metadata\Reflect.ts:1202:35)
    at Object.decorate (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\reflect-metadata\Reflect.ts:742:24)
    at _decorate (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\inversify\lib\annotation\decorator_utils.js:42:13)
    at Object.decorate (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\inversify\lib\annotation\decorator_utils.js:55:9)
    at Object.<anonymous> (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\src\event-emitters\ObfuscationEventEmitter.ts:7:9)
    at r (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:22:1)
    at Object.<anonymous> (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\src\container\InversifyContainerFacade.ts:30:1)
    at r (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:22:1)
    at Object.<anonymous> (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\src\JavaScriptObfuscatorFacade.ts:11:1)
    at r (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:22:1)
    at Object.<anonymous> (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\index.ts:3:1)
    at r (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:22:1)
    at E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:74:1
    at Object.<anonymous> (E:\downloads\whats-app-sender-dashboard\coreui-free-vue-admin-template-master\node_modules\javascript-obfuscator\dist\webpack:\JavaScriptObfuscator\webpack\bootstrap:74:1)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at eval (webpack-internal:///./src/main.js:1:7)
    at Object../src/main.js (http://127.0.0.1:8080/app.js:1197:1)
    at __webpack_require__ (http://127.0.0.1:8080/app.js:724:30)
    at fn (http://127.0.0.1:8080/app.js:101:20)
    at Object.1 (http://127.0.0.1:8080/app.js:1211:18)
    at __webpack_require__ (http://127.0.0.1:8080/app.js:724:30)
    at http://127.0.0.1:8080/app.js:791:37
    at http://127.0.0.1:8080/app.js:794:10

那么，如何成功混淆 vue 应用程序呢？

Answer 1

更新
我目前正在使用以下设置，以实现使用 TerserPlugin 从 vue 应用程序的构建过程中丑化 js 代码的预期结果
vue.config.js 文件

const TerserPlugin = require('terser-webpack-plugin')

结果是相当好混淆的代码:

但是仍然可以看到 Vue 应用程序实例的选项