在同一页面中具有路由的多个Vue应用

Question

我正在尝试重现以下行为：

VueJS App 1和VueJS App2是具有路由和存储功能的整个VueJS应用程序。

我希望能够独立部署它们（在路由/ my-route1和/ my-route2上提供），也可以将其部署为另一个页面（/ my-route3）中的实例。

想法是我可以根据需要创建任意数量的Vue应用实例。应用之间的路由和存储应独立。

我已经能够通过iframe使它工作，但是我想找到一种更好的方法。

我目前面临的问题是所有这些实例都共享同一个根Vue实例，在实例化它们时是否可以创建我们自己的本地Vue？我希望能够使用全局组件，但是它们应该只对创建它们的应用程序是全局的。

预先感谢您的帮助！

Answer 1

在过去的几天里，我已经多次查看了这个问题，并得出结论，这是一个错误的概念，我只能提出以下建议，并且因为到目前为止还没有人回答，所以这是一种可能的替代方案考虑...

假设您可以访问单独的应用程序源并且确实在它们的控制之下，那么我会将它们转换为组件，考虑到缓存版本控制（文件名哈希）会遇到各种各样的问题，我认为这些组件的问题可能较少以及为了获得正确加载所需的所有资产而进行的代码拆分，将是一场噩梦。

实际上应该已经将单独的应用程序创建为全面的dynamic components，并将其源代码都放在自己的子目录中。

通过利用动态导入和代码拆分复杂的应用程序部分，可以在需要时自动加载部分。

作为组件，可以使用迭代器通过<component :is="myView"/>输出所需的图块内容，从而轻松地按需要输出图块。

// Register app components:

const Dynamics = {

  // A component to use while the async component is loading
  loading: LoadingComponent,

  // A component to use if the load fails
  error: ErrorComponent,

  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000

}

Vue.component('application-one', () => ({ ...Dynamics, component: import('@/components/applications/app-one/app.vue') }))

Vue.component('application-two', () => ({ ...Dynamics, component: import('@/components/applications/app-two/app.vue') }))

// Dashboard.vue

<template>

 <div id="dashboard">

   <template v-for="(app, index) of applications">

     <component :is="app.name" :key="index" v-bind="app" />

   </template>

 </div>

</template>

<script>

  export default {

    name: 'dashboard',

    // example only, real list would be generated from an API endpoint call?
    data: () => ({

      applications: [
        { name: 'application-one', width: '33%', height: '100%' },
        { name: 'application-two', width: '33%', height: '100%' },
        { name: 'application-one', width: '33%', height: '33%' },
        { name: 'application-one', width: '33%', height: '33%' },
        { name: 'application-two', width: '33%', height: '33%' },
      ]

    })

  }

</script>

希望这为您提供一些替代方法的基础。