将两个独立的 vue 应用组合/组合在一起

Question

我有两个相互独立开发的 vue 应用程序。

用户界面
管理界面

两者都有自己的路线、商店、配置等。
我发现这条评论https://forum.vuejs.org/t/composing-multiple-apps-as-a-single-spa/12622/16将每个应用程序作为主应用程序中的一个组件来处理。

我尝试了它并让它工作，直到我用我的“真实”应用程序尝试它。
他们惨遭失败，因为他们无法解析路径和缺少诸如路由之类的东西。

主要： App.vue

<script>
export default {
  name: "MainApp",
  data() {
    return {
      app: "user",
    };
  },
  methods: {
    changeApp(name) {
      console.log("Change app called", name);
      this.app = name;
    },
  },
};
</script>

<template>
  <div>
    <UserApp v-if="app === 'user'" @changeApp="changeApp"></UserApp>
    <AdminApp v-else-if="app === 'admin'" @changeApp="changeApp"></AdminApp>
    <div v-else>Default App ({{ app }})</div>
  </div>
</template>

主要： main.js

import { createApp } from "vue";
import Main from "./App.vue";

import UserApp from '../apps/user/src/App.vue';
import AdminApp from '../apps/admin/src/App.vue';

const main = createApp(Main);

main.component("UserApp", UserApp);
main.component("AdminApp", AdminApp);

main.mount("#main");

主营：索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>OpenHaus</title>
</head>

<body>
  <div id="main"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

在主 vue 应用程序中，我有一个名为“apps”的文件夹，其中包含管理员和用户应用程序。
然后将每个App.vue文件导入并作为文件处理。

这样做，缺少一个重要步骤：如何从每个子应用程序处理main.js文件？

将每个应用程序视为主应用程序的组件似乎不如最初想象的那么好。 我如何将两个应用程序组合在一起作为一个应用程序，同时我单独维护/开发/测试每个应用程序？

也许在“编译”为库之后： https://vitejs.dev/guide/build.html#library-mode ？

用户应用程序： https://github.com/OpenHausIO/frontend
管理应用程序： https://github.com/OpenHausIO/admin-frontend
主应用程序： https://github.com/OpenHausIO/frontend-composition

Answer 1

我个人从未听说过将两个应用程序合并为一个的设置。 我能理解为什么这会导致你提到的冲突。 如果我在你的鞋子里，我可能会用不同的方法 go 。

似乎您有一个用户和管理员应用程序。 如果打算拥有一个内容相似的用户和管理员环境，但某些内容只有在您是管理员时才能访问。 我会创建一个应用程序，根据您的凭据确定您将处于“管理员”还是“用户”环境中。 这将是一个不会一分为二的应用程序。

如果用户和管理员应用程序的内容完全不同，那么我会简单地创建两个不同的应用程序。 这不仅可以解决冲突，而且我认为它还可以让您更清楚地了解您正在处理的应用程序。 当将两者合并为一个时，可能很难区分您正在更改哪些应用程序。 特别是如果您打算在未来升级应用程序。

将两个独立的 vue 应用组合/组合在一起

问题描述

1 个解决方案

解决方案1
0 2022-09-16 11:01:12

将两个独立的 vue 应用组合/组合在一起

问题描述

1 个解决方案

解决方案1 0 2022-09-16 11:01:12

解决方案1
0 2022-09-16 11:01:12