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

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

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

enter image description here

以下是我的项目细节:

enter image description here

我的索引.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>

另一个指数.第一个项目中包含的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>

相应的错误输入.js文件包含以下代码:

'use strict';

app.config(function ($routeProvider) {
    $routeProvider
        .when("/errorinput", {
            templateUrl: "views/errorinput.html"
        });
});


app.controller('ErrorInputCtrl', ['$scope', '$http', function ($scope, $http) {
 // Implement me!
}]);

你知道如何将两者合并在一起以获得所需的功能吗?

EDIT:所以我找到了在一台服务器上运行两个项目的方法.我在VueJS项目中包含了AngularJS的所有依赖项.angularJS应用程序运行良好,但现在VueJS网页没有与angularJS一起出现.当我给出VueJS应用程序的相对路径时,它似乎出现在后台.你知道我现在如何在这个自举的AngularJS应用程序中路由我的VueJ吗?有关此问题的更多详细信息,请参见:

more details

推荐答案

它们也完全独立.没有

看来你可以试试酷炫100.

实现这一点有不同的方法,比如:

  1. 在不同的iFrame中呈现它们,并通过postMessage API进行通信
  2. 在不同的URL上呈现它们,但使用具有通用依赖关系管理的event bus.
  3. 使用单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}`);
  }
}

你可以在这个配置中找到更多细节

在安装了相应的SPA插件(在您的例子中是single-spa-vuesingle-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.的示例应用程序

希望有帮助.

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

为什么在Vue.js中修改非react 性似乎是react 性的?

Vuejs 通过数据键迭代复杂对象

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

vite - 具有相对assets资源 路径的子页面

nuxt.js - 预加载 .woff 字体加载为@font-face

带有热重载的 docker 容器上的 Vue.js 应用程序

如何从 Vuex 状态使用 Vue Router?

Vue Table 2 - 自定义过滤器

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

为什么 vue 中的 @mouseover 操作不起作用

根据 URL 有条件地隐藏视图组件

为什么不先移动鼠标就无法滚动视差?

Polyfill for ie

从 Url 中删除查询字符串参数

如何在 Vue 中动态创建组件上获取更新的 $refs?

如何使用 VueJS / Typescript 导入 JSON 文件?

如何更改 Vuetify 日历日期格式

我可以使用react路由创建别名路由吗?

VueJS 按键查找元素