多页应用VueJs

Question

嗨！ 我目前正在建设一个大型VueJs应用，并想将其设置为一个多应用程序，在那里我有两个不同的部分（管理员+用户），我想单独加载，但共享一些组件和服务。我怎么会去建立这种架构，任何帮助，将不胜感激。

设置多个的WebPack条目说明如下：（https://github.com/Plortinus/vue-multiple-pages）为我工作，但现在我遇到的问题是，因为Vuex商店是在重载/重定向删除的身份认证。

有没有人在过去碰到过这个问题吗？提前致谢

Answer 1

我内置使用Ruby on Rails的大规模多页VueJs应用的多页的一部分洒VUE把事情互动。

你可以做的是通过在各种各样的容器包裹起来初始化页面的某些地区Vue公司的应用程序，然后做同样为需要的Vue组件的所有页面。

我这样做，这样一来，我有一个容器类叫vue-container它包装我的组件的调用是这样的：

<div class="vue-container">
  <floating-menu></floating-menu>
  <show-pdf :resource="<%= @resource.as_json(current_user: current_user) %>"></show-pdf>
</div>

这里qazxsw POI和POI qazxsw是两个Vue的组件。

然后，其中进口的所有网页我app.js文件，我有以下代码：

floating-menu

这将创建与每个show-pdf元素，一切正常初始化Vue公司的应用程序！

如果您需要共享不同组件间的数据，任何标准的数据共享技术，如一个事件总线或Vuex会工作得很好。

我写了一篇博客文章，详细说明该设置：

if(window.vueapp == null){
  window.vueapp = []
}
if(window.vueapp != null){
  for(var i=0, len=vueapp.length; i < len; i++){
    vueapp[i].$destroy();
  }
  window.vueapp = []
}
var myNodeList = document.querySelectorAll('.vue-container');
forEach(myNodeList, function (index, element) {
  if (element != null) {
    var vueapp = new Vue({
      el: element,
      store,
      components: {
        ShowPdf, FloatingMenu
      }
    })
    window.vueapp.push(vueapp);
  }
});