我阅读了各种可用的资源,但仍然找不到解决方法。这里的问题是我想将两个不同的项目合并在一起。我的同事正在研究他在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
最佳答案
看来您可以尝试很酷的 Micro Frontend 。
MicroFrontend是一种新的应用程序范式,其中前端服务被组织为不同的应用程序,并通过事件总线在前端进行通信。
有多种实现此目的的方法,例如:
postMessage
API进行通信既然您说应用程序不需要相互通信,那么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其安装和卸载框架所需的生命周期 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。
希望能有所帮助。