Question

嗨！
我目前正在构建一个大规模的VueJs应用程序，并希望将其设置为多页面应用程序，我有两个不同的部分（管理员+用户），我想独立加载，但共享一些组件和服务。我将如何构建这种架构，任何帮助都将受到赞赏。

如下所述设置多个Webpack条目：（https://github.com/Plortinus/vue-multiple-pages）对我有用，但我现在遇到的问题是验证，因为在重新加载/重定向时删除了Vuex商店

过去有没有人遇到过这个问题？在此先感谢

Answer 1

我使用Ruby on Rails构建了一个大型的Multipage VueJs应用程序作为Multipage的一部分，并使用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>

floating-menu和show-pdf是两个Vue组件。

然后，在为所有页面导入的app.js文件中，我具有以下代码：

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);
  }
});

这将在每个.vue-container元素上创建并初始化Vue应用，一切正常！

如果您需要在不同组件之间共享数据，那么任何标准的数据共享技术（例如事件总线或Vuex）都可以正常工作。

我写了一篇博客文章，详细介绍了此设置：https://blog.koley.in/2018/vue-components-in-multi-page-apps

多页面应用程序VueJs

1 个答案: