Vue-Cli - 保留类名 Webpack UglifyJS

Question

经过数小时的调试、测试和完全绝望，我找不到使用 UglifyJS for Webpack 和 Vue-CLI 禁用类/函数名称丑化的方法。

我试过这个及其组合：

optimization: {
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                keep_classnames: true,
                keep_fnames: true,
                compress: {
                    keep_classnames: true,
                    keep_fnames: true,
                },
                mangle: {
                    keep_classnames: true,
                    keep_fnames: true,
                },
            },
        }),
    ]
},

plugins: [
    new UglifyJsPlugin({
        uglifyOptions: {
            keep_classnames: true,
            keep_fnames: true,
            compress: {
                keep_classnames: true,
                keep_fnames: true,
            },
            mangle: {
                keep_classnames: true,
                keep_fnames: true,
            },
        },
    }),
],

似乎没有任何效果。我只是不能禁用类名丑化。

我需要依赖函数和类名，但这样所有类（更准确地说是 Vue 组件名 - 我使用的是基于类的组件）都被重命名为 E 作为类名。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

我能够保留类名（包括 Vue.js 组件）：

    module.exports = {
      chainWebpack: config => {
        config.optimization
          .minimizer('terser')
          .tap(args => {
            const { terserOptions } = args[0]
            terserOptions.keep_classnames = true
            terserOptions.keep_fnames = true
            return args
          })
       }
    }

credits