Fatal编程技术网
  • javascript/
  • Javascript 如何将Angular和Vue项目合并在一起？

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

javascript angularjs node.js vue.js

Javascript 如何将Angular和Vue项目合并在一起？,javascript,angularjs,node.js,vue.js,angular-ui-bootstrap,Javascript,Angularjs,Node.js,Vue.js,Angular Ui Bootstrap,我阅读了关于这方面的各种资源，但仍然找不到解决办法。这里的问题是我想把两个不同的项目合并在一起。我的同事正在开发一个他用AngularJS设计的功能。我使用VueJS开发了我的功能。管理层随后决定将两者合并在一起。与中一样，在启动第一个项目的UI中，将提供一个链接，我在VueJS中设计的网页将从该链接启动 我使用npm start在VueJS服务器上本地运行我的项目，同时也使用express server。但第一个项目只运行节点app.js，然后在本地运行 以下是他的项目描述截图： 这是我的项

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

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

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

这是我的项目详情：

My 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>
你知道如何将两者合并在一起以获得所需的功能吗

编辑：因此我找到了在一台服务器上运行两个项目的方法。我在VueJS项目中包含了AngularJS的所有依赖项。angularJS应用程序运行良好，但现在，VueJS网页没有随angularJS一起出现。当我给出VueJS应用程序的相对路径时，它似乎出现在后台。知道我现在如何在这个引导的AngularJS应用程序中路由我的VUEJ吗？有关此问题的更多详细信息，请参见：

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

看起来你可以试试酷的。 Microfront是一种新的应用程序范例，其中前端服务被组织为不同的应用程序，并通过事件总线进行通信，所有这些都在前端

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

  • 在不同的iFrame中呈现它们，并通过
    postMessage
    API进行通信
  • 在不同的URL上呈现它们，但使用具有公共依赖关系管理的URL
  • 使用单
    • 因为您说过应用程序不需要彼此通信，所以SPA框架对您来说会更容易。它是该领域非常成熟的框架，支持前端框架，包括Vue和AngularJS，但不限于这些选项

    要实现这一点，您需要有效地创建具有不同div的HTML：

    <div id="angular1"></div>
<div id="vue-app"></div>
    您可以在此配置中找到更多详细信息

    在安装相应的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/dist/Vue.min.js”导入Vue；
从“单一spa vue”导入单一SPAVue；
const vueLifecycles=singleSpaVue({
Vue，
任命：{
el:“#vue应用程序”
模板：`Vue有效
    `
}
});
导出常量引导=[
vueLifecycles.bootstrap，
];
导出常量装载=[
vueLifecycles.mount，
];
导出常量卸载=[
vueLifecycles.unmount，
];
    您可以找到一个带有Vue和Angular的示例应用程序 这是一个由单一水疗制造商提供的分步指南。还可以查看他们的网站

    希望有帮助

    一个解决方案是继续保持这两个功能（真正的应用程序）分离，并使用负载均衡器转移用户流量。负载平衡器可以根据配置的URL规则处理流量并将其路由到相应的应用程序。如果您使用的是AWS，则可以使用和配置应用程序负载平衡器（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中的示例：

    这两个项目都需要共享数据，还是作为两个不同的实例保留？不。目前，只有我的项目使用data server，而不是第一个。而且它们也完全独立。第一个项目应用程序中没有需要启动我的应用程序的链接。这些应用程序完全独立，这使得使用负载平衡器更容易解决这个问题。看看我刚刚提交的答案。我想到了，但管理层不允许为此目的使用负载平衡器。它必须作为单个连续应用程序工作。不确定如何插入facepalm作为注释，但…：facepalm我正在进行这个精确的设置，因为我们有一个角度应用程序，我们将转换为react，所以我们使用这个精确的设置一次迁移应用程序的一部分。很抱歉没有澄清这个问题，但我已经尽了最大努力。这里的问题不是将应用程序从Angular迁移到Vue，而是将它们作为一个整体组合在一起。此外，我们也不允许像您在解决方案中建议的那样使用负载平衡器。哇！正是我需要的。这确实是一个很酷的框架+我为此付出了代价！！另外，出于好奇，我们也可以将其用于共享公共数据库详细信息的应用程序，因为现在我们实际上有一些东西可以在它们之间共享。所以即使这些都是依赖的，那么也没什么大不了的。如果我错了，请纠正我。当然。共享数据库详细信息应该很简单。如果您想共享实用程序函数之类的功能，可以将它们添加到webpack模块中的
    公共依赖项
    块中。还要查看更多共享选项。在设置根配置和两个项目目录后，我们如何“运行”这个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}`);
  }
}

    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,
];

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