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

【问题标题】：How to merge Angular and Vue projects together?如何将 Angular 和 Vue 项目合并在一起？
【发布时间】：2018-07-19 09:27:40
【问题描述】：

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

我正在使用npm start 在 VueJS 服务器上本地运行我的项目，并且还使用 express 服务器。但是第一个项目只运行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 的所有依赖项。 Angular 应用程序运行良好，但现在 VueJS 网页没有与 angularJS 一起出现。当我给出我的 VueJS 应用程序的相对路径时，它似乎出现在后台。知道我现在如何在这个引导的 AngularJS 应用程序中路由我的 VueJS 吗？此处提到了有关此问题的更多详细信息：

more details

【问题讨论】：

两个项目是否需要共享数据，或者它们是否保留为 2 个不同的实例？
没有。目前，只有我的项目使用数据服务器，但不是第一个。
它们也是完全独立的。第一个项目应用程序中没有链接，我的应用程序需要从其中启动。
完全独立的应用程序实际上使这个问题更容易使用负载平衡器解决。查看我刚刚提交的答案。

标签： javascript angularjs node.js vue.js angular-ui-bootstrap

【解决方案1】：

它们也完全相互独立。没有第一个项目应用中的链接，我的应用需要从该链接启动。

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

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

在不同的 iFrame 中呈现它们并通过 postMessage API 进行通信
在不同的 URL 上呈现它们，但使用 event bus 和公共依赖管理。
使用单个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。

希望对您有所帮助。

【讨论】：

哇！正是我需要的。这确实是一个很酷的框架。为此+1！
另外，出于我的好奇心，我们也可以将它用于共享公共数据库详细信息的应用程序，因为现在我们实际上已经在它们之间共享了一些东西。因此，即使这些将是依赖的，那么也没有那么重要。如果我在这里错了，请纠正我。
当然。共享数据库详细信息应该很简单。如果你喜欢分享实用函数之类的东西，你可以将它们添加到 webpack 模块中的 common-dependencies 块中。另请查看github.com/CanopyTax/single-spa/issues/107 了解更多分享选项。
在设置了 root-config 并且两个项目目录就位后，我们如何“运行”这个 SPA 应用程序？

【解决方案2】：

一种解决方案是继续保持这两个功能（真正的应用程序）分开，并使用负载均衡器转移用户流量。负载均衡器可以根据配置的 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>

【讨论】：

我想过，但管理层不会真的允许为此目的使用负载均衡器。它必须作为一个连续的应用程序运行。
不确定如何插入 facepalm 作为评论，但是..... :facepalm 我正在做这个确切的设置，因为我们有一个角度应用程序，我们将转换它以做出反应，所以我们正在使用该精确设置一次迁移应用的一个部分。
我很抱歉没有澄清这个问题，但我已经尽力了。这里的问题不是将应用程序从 Angular 迁移到 Vue，而是将它们组合在一起。此外，我们也不允许使用您在解决方案中建议的负载均衡器。