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

我正在使用npm start在VueJS服务器上本地运行我的项目,也正在使用Express服务器。但是第一个项目仅运行node app.js,然后在本地运行。

以下是他的项目说明的屏幕截图:

javascript - 如何将Angular和Vue项目合并在一起?-LMLPHP

这是我的项目详细信息:

javascript - 如何将Angular和Vue项目合并在一起?-LMLPHP

我的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

最佳答案



看来您可以尝试很酷的 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-vuesingle-spa-angular)之后,我们必须告诉Single-Spa其安装和卸载框架所需的生命周期 Hook 。

    在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

    希望能有所帮助。

    10-05 21:02
    查看更多