如何将 Vue 公开为全局对象 [英] How to expose Vue as global object

问题描述

我正在将旧代码与使用 Webpack 构建的较新代码集成.在遗留代码中，纯 js 访问 Vue 只需:new Vue(...)，来自全局范围.在 Webpack 中，Vue 将被吸入供应商包中，我想公开 Vue，因此我的遗留代码仍将其视为 window.Vue

I am integrating legacy code with newer one, built with Webpack. In legacy code, plain js accessed Vue simply with: new Vue(...), from global scope. In Webpack, Vue will get sucked into vendor bundle and I would like to expose Vue back, so my legacy code would still see it as window.Vue

到目前为止我所做的(webpack 3.x):

What I have done so far (webpack 3.x):

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

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

I get close with this, but I end up with window.Vue.default having the instance. How do I shim it further?

推荐答案

如果你能把它变成 window.Vue.default 那么在它可用之后添加一行代码怎么样(但不是在 WebPacked js 中)即

If you can get it to window.Vue.default then how about just adding a line of code after that's available (but not within WebPacked js) that is

 app = window.Vue.default; 

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

Then Vue will be globally available from the app object.

这篇关于如何将 Vue 公开为全局对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！