Vue项目混淆后方法名乱码导致报错怎么办？

技术可欣提问于 2026-01-26 18:06:24 阅读 32

安全

最近给Vue项目做代码混淆时遇到奇怪的问题，混淆后的JS文件里方法名变成了’_$_0’这种乱码形式，但运行时却报’Cannot read properties of undefined’错误。

我的组件代码像这样写的：<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-html">
<template>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
}
</script>
</code></code></pre>

混淆配置用的是terser-webpack-plugin，默认开启了mangle选项。但生产构建后发现，其他模块引用handleClick时突然变成undefined。试过关闭mangle就正常了，但这样就没法混淆了，该怎么调整配置呢？

我来解答赞 8 收藏

反馈

2 条解答

设计师梓晴 Lv1

Vue单文件组件的方法被terser混淆导致运行时报undefined，是因为mangle默认会混淆函数名。你可以在terser配置里通过reserved字段保留方法名不被混淆。具体配置如下：

new TerserPlugin({

  terserOptions: {

    mangle: {

      reserved: ['handleClick'] // 保留方法名不被混淆

    }

  }

})

如果组件里还有其他方法也可以一并加进去，或者写个正则匹配保留所有方法名。

2026-02-08 09:18

设计师雨橙 Lv1

这是典型的代码混淆导致的方法名被改写问题，terser的mangle确实会把方法名改成乱码。我之前这样搞的，在webpack配置里加这个：

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



module.exports = {

  optimization: {

    minimize: true,

    minimizer: [

      new TerserPlugin({

        terserOptions: {

          mangle: {

            reserved: ['handleClick'] // 把需要保留的方法名加到这里

          }

        }

      })

    ]

  }

}

如果方法太多可以一次性加完，或者用正则匹配保留特定格式的方法名。

2026-01-29 16:03