如何将Vue暴露为全局对象？Webpack集成遗留代码适配问题

我之前在维护老项目集成Webpack3的时候，也碰到过一模一样的问题——Vue被打包进vendor bundle后，遗留代码没法直接通过window.Vue访问，只能拿到window.Vue.default。本质原因是Vue作为ES模块被导入时，真正的构造函数被包裹在模块的default属性里，直接挂载的话其实是把整个模块对象挂到了window上。下面是几个亲测有效的解决办法：

方法一：手动在入口文件处理全局挂载 #

这是最直接省心的方式，在你的Webpack入口文件（比如main.js）里，导入Vue后手动做个兼容处理：

import Vue from 'vue'

// 兼容ES模块导出的情况，把真正的Vue构造函数挂载到window
window.Vue = Vue.default || Vue;

这样遗留代码里直接调用new window.Vue(...)就能正常工作，不用改任何遗留代码。

方法二：用expose-loader自动暴露全局 #

Webpack3可以借助expose-loader插件自动帮你把模块暴露到全局，步骤很简单：

1. 先安装依赖：

npm install expose-loader --save-dev

2. 在Webpack配置文件的module.rules里添加这条规则：

module: {
  rules: [
    {
      // 精准匹配vue模块的入口文件
      test: require.resolve('vue'),
      use: [{
        loader: 'expose-loader',
        options: 'Vue'
      }]
    }
  ]
}

配置好之后，Webpack在打包时会自动把Vue构造函数暴露到window.Vue，你不用再手动在入口文件写挂载代码。

方法三：切换到Vue的UMD构建版本 #

如果你的项目对ES模块的特性没什么依赖，也可以直接用Vue的UMD版本，它本身就会自动注册全局的Vue对象。只需要在Webpack配置里添加个alias：

resolve: {
  alias: {
    // 把vue的导入指向UMD版本的文件
    'vue$': 'vue/dist/vue.js'
  }
}

之后在入口文件里import Vue from 'vue'拿到的就是直接的构造函数，直接写window.Vue = Vue就搞定了。

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