Webpack生产构建删除Vue挂载全局变量vm，外部无法调用实例方法如何解决

问题根因 #

生产环境构建时，Webpack默认启用的Terser压缩插件会自动删除模块内未被引用的无效代码，你声明的var vm仅完成赋值、没有在当前模块内部使用，因此被判定为冗余代码直接移除，开发环境未开启压缩优化所以可以正常保留。

可行解决方案 #

方案1：直接挂载到全局window对象（最推荐，无需修改构建配置） #

将原有变量声明改为直接挂载到window全局对象，压缩插件不会清理全局对象的属性赋值，原有外部调用逻辑完全无需改动：

window.vm = new Vue({
  // 原有配置保持不变
  ...
});

后续在页面任意位置调用vm.foo()都可以正常访问到Vue实例的属性和方法。

方案2：修改Webpack Mix配置关闭无效变量清理 #

如果需要保留原有var vm =的写法，可以在项目根目录新建webpack.mix.js配置文件，添加以下规则关闭Terser的未使用变量清理逻辑：

let mix = require('webpack-mix');

mix.options({
  terser: {
    terserOptions: {
      compress: {
        // 禁用未使用变量删除优化
        unused: false
      }
    }
  }
});

注意该方案会全局关闭所有未使用变量的压缩优化，会导致打包体积略有上升，性价比低于方案1。

方案3：通过output.library规范暴露全局变量 #

如果你需要更标准化的模块暴露逻辑，可以通过Webpack的output.library配置实现全局变量导出：

1. 先在webpack.mix.js中添加扩展配置：

let mix = require('webpack-mix');

mix.webpackConfig({
  output: {
    library: 'vm',
    libraryExport: 'default'
  }
});

2. 改造原有Vue实例声明代码为导出形式：

export default new Vue({
  // 原有配置保持不变
  ...
});

打包后导出的Vue实例会自动挂载到全局vm变量上，外部可以正常调用。

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