如何配置Vue 2项目实现构建时指定函数不被混淆？

1. 如何配置打包时保留指定函数名不被混淆 #

可以通过vue.config.js配置实现，Vue 2.6.11版本默认使用terser-webpack-plugin做代码压缩混淆，你可以自定义terser的保留字配置，示例如下：

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

module.exports = {
  // 仅生产环境生效的话可以加process.env.NODE_ENV === 'production'判断
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            // 数组内填入你需要保留不被混淆的函数名
            reserved: ['webviewHook1', 'webviewHook2']
          }
        })
      ]
    }
  }
}

2. 钩子函数的声明位置 #

可以在vuex模块或者main.js中声明，不需要必须放到created/mounted生命周期中，只需要满足核心要求：将函数挂载到全局window对象上，否则函数会被封装在模块作用域内，自定义webview无法从全局环境调用到。
示例声明方式：

// main.js 或者任意vuex模块文件中都可直接定义
window.webviewGetAppInfo = function() {
  // 你的钩子逻辑
  return JSON.stringify({version: '1.0.0'})
}

如果你的钩子函数需要依赖Vue实例初始化完成、或者需要访问Vue实例内的状态/方法，再考虑放到根组件的created/mounted钩子中定义挂载即可。

你目前使用的把函数写到public/index.html的script标签中的方案也是完全可行的，这部分代码不会被webpack编译混淆，天然就是全局可访问的，适合逻辑简单、不需要依赖Vue项目内部状态的钩子场景。

内容的提问来源于stack exchange，提问作者El Evilen