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

Question

我阅读了有关此的各种可用资源，但仍然想不出办法。这里的问题是我想将两个不同的项目合并在一起。我的同事正在研究他在 AngularJS 中设计的一项功能。我使用 VueJS 开发了我的功能。管理层随后决定将两者合并。例如，从第一个项目启动的 UI 开始，我在 VueJS 中设计的网页将启动的位置提供 link。

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

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

这是我的项目详情：

我的 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 具有用于启动我的应用程序的 link 的代码。 link 包含可以重定向到我的代码的代码：

<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 的所有依赖项。 angular 应用程序运行ning 很好，但现在 VueJS 网页没有随 angularJS 一起出现。当我提供我的 VueJS 应用程序的相对路径时，它似乎进入后台。知道我现在如何在这个引导的 AngularJS 应用程序中路由我的 VueJS 吗？此处提到了有关此问题的更多详细信息：

Answer 1

And they are entirely independent from each other as well. There is no link in the first project app from where my app needs to be launched.

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

有不同的方法可以实现这一点，例如：

在不同的 iFrame 中呈现它们并通过 postMessage API
在不同的 URL 上呈现它们，但使用具有通用依赖管理的 event bus。
使用单个 SPA Framework.

既然你说应用程序之间不需要相互通信，那么 SPA Framework 对你来说会更容易。它是该领域非常成熟的框架，支持包括 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 is a step by step guide from makers of single-spa. Also check out their examples.

希望对您有所帮助。

Answer 2

一个解决方案是继续将这两个功能（真正的应用程序）分开，并使用负载均衡器转移用户流量。负载均衡器可以根据配置的 URL 规则处理流量并将其路由到相应的应用程序。如果您使用的是 AWS，则可以使用 listener rules and 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 项目合并在一起？

How to merge Angular and Vue projects together?

javascript

node.js

angularjs

angular-ui-bootstrap

vue.js