Question

我阅读了相关的各种资源，但仍然无法找到方法。这里的问题是我想将两个不同的项目合并在一起。我的同事正在研究他在AngularJS中设计的一个功能。我使用VueJS开发了我的功能。管理层随后决定将两者合并在一起。在第一个项目启动的用户界面中，将提供一个链接，从我的网页在VueJS中设计的位置开始。

我使用npm start在VueJS服务器上本地运行我的项目，同时也使用快速服务器。但是第一个项目只运行node app.js，然后在本地运行。

以下是他的项目描述的截图：

这是我的项目详情：

我的index.html文件包含以下内容：

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Error Details and Description</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

第一个项目中包含的另一个index.html包含我的应用程序将通过其启动的链接的代码。该链接包含此代码，可以重定向到我的代码：

<li><a><i class="fa fa-edit"></i>Administration<span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                          <li><a href="#!errorinput"><i class="fa fa-database"></i>Manage Error Descriptions</a></li>

相应的errorinput.js文件包含以下代码：

'use strict';

app.config(function ($routeProvider) {
    $routeProvider
        .when("/errorinput", {
            templateUrl: "views/errorinput.html"
        });
});


app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
 // Implement me!
}]);

知道如何将它们合并在一起以获得所需的功能吗？

编辑：所以我确实找到了在一台服务器上运行这两个项目的方法。我在我的VueJS项目中包含了AngularJS的所有依赖项。角应用程序运行正常，但现在，VueJS网页并没有与angularJS一起出现。当我给出我的VueJS应用程序的相对路径时，它似乎在后台。任何想法我现在如何在这个引导的AngularJS应用程序中路由我的VueJS？这里提到了关于这个问题的更多细节：

more details

Answer 1

他们也完全相互独立。没有在我的应用程序需要启动的第一个项目应用程序中链接。

您似乎可以尝试酷炫的 Micro Frontend 。 MicroFrontend是一种新的应用程序范例，前端服务被组织为不同的应用程序，并通过前端的事件总线进行通信。

有不同的方法来实现这一目标：

在不同的iFrame中呈现它们并通过postMessage API
使用具有常见依赖关系管理的event bus在不同的URL上呈现它们。
使用单SPA Framework。

由于您说应用程序无需相互通信，因此SPA框架将更容易。它是该领域非常成熟的框架，支持前端框架，包括Vue和AngularJS，但不限于这些选项。

如何使这项工作有效地创建一个包含不同div的HTML：

<div id="angular1"></div>
<div id="vue-app"></div>

这样他们就不会互相改变。

创建单个SPA文件作为应用程序的配置。

import * as singleSpa from 'single-spa';

singleSpa.registerApplication('angular', () =>
  import ('../app1/angular1.app.js'), pathPrefix('/app1'));
singleSpa.registerApplication('vue', () =>
  import ('../app2/vue.app.js'), pathPrefix('/app2'));

singleSpa.start();

function pathPrefix(prefix) {
  return function(location) {
    return location.pathname.startsWith(`${prefix}`);
  }
}

您可以在此配置Here

在你的情况下安装相应的SPA插件（single-spa-vue和single-spa-angular）后，我们必须告诉single-spa安装和卸载框架所需的生命周期挂钩。

在vue的情况下：

import Vue from 'vue/dist/vue.min.js';
import singleSpaVue from 'single-spa-vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app'
    template: `<p>Vue Works</p>`
  }
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

您可以找到包含Vue和Angular Here.的示例应用程序 Here是单一水疗中心制造商的分步指南。另请查看他们的examples。

希望有所帮助。

Answer 2

一种解决方案是继续保持两个功能（真正的应用程序）分离，并使用Load Balancer转移用户流量。负载均衡器可以根据配置的URL规则处理和路由到相应应用程序的流量。如果您使用的是AWS，则可以使用listener rules和target groups配置应用程序负载均衡器（ALB）。

即使您不使用AWS，也可以轻松配置此类负载均衡器。例如，在nginx上使用反向代理服务器。

这种方法的好处是，根本不需要更新应用程序，也不必担心任何跨框架依赖性，问题等。

示例：

applicationname.com/app1 -> forwards to Target Group for App 1
applicationname.com/app2 -> forwards to Target Group for App 2

在每个应用程序中，您现在只需使用可指向其他应用程序的常规href链接。应用1中的示例：<a href="/app2/feature1">Feature 1</a>

如何将Angular和Vue项目合并在一起？

2 个答案: