如何将 Vue 公开为全局对象答案

【问题标题】：How to expose Vue as global object如何将 Vue 公开为全局对象
【发布时间】：2018-07-24 08:15:26
【问题描述】：

我正在将旧代码与使用 Webpack 构建的新代码集成。在遗留代码中，普通的 js 从全局范围内简单地使用：new Vue(...) 访问 Vue。在 Webpack 中，Vue 将被吸入供应商捆绑包中，我想将 Vue 公开回来，所以我的遗留代码仍将其视为 window.Vue

到目前为止我做了什么（webpack 3.x）：

{
  test: require.resolve('vue/dist/vue.esm.js'), 
  use: [{loader: 'expose-loader',
         options: 'Vue'
   }]
 }

我很接近这个，但我最终得到了具有实例的 window.Vue.default。我如何进一步填充它？

【问题讨论】：

【解决方案1】：

如果您可以将其发送到window.Vue.default，那么在可用之后（但不在 WebPacked js 中）添加一行代码怎么样

 app = window.Vue.default;

然后 Vue 将从 app 对象全局可用。

【讨论】：

确实有效。泰。但是我仍然对一个小问题感到困惑。当我通过跟随它时，似乎我并不总是保证执行顺序是公正的正确的。我猜是因为 webpack 包装函数中的模块是按 require_this_and_that() 调用的顺序而不是
不幸的是，我对 WebPack 的了解并不像我想的那样熟悉，所以我不确定如何保证 WebPack 提供 window.Vue.default。但是，Vue 必须自动执行，以便它可以处理页面上的 vue 指令和模板，所以我的另一种方法是向 vue 实例添加 created 方法并将其设置为 created: function () { window.app = this;} 这将确保一旦创建了 vue，它就会将应用程序设置为它的实例。然后 Vue 将从 app 对象全局可用。