如何整合AngularJS与VueJS项目？实现从前者页面跳转至后者页面

嘿，我之前刚好处理过类似的混合框架整合需求，给你几个实用的方案，你可以根据自己项目的部署情况选最合适的：

方案1：直接路由跳转（最简单的无侵入方式） #

如果你的Vue项目是独立部署的（比如单独的域名/子路径），这个方案最省心，不需要改动太多代码。

操作步骤： #

• 先确保你的Vue项目已经部署到可访问的地址（比如同域名下的/vue-feature，或者独立域名http://your-vue-app.com）
• 在AngularJS的模板里直接加跳转链接：

<!-- AngularJS模板中的静态链接 -->
<a href="/vue-feature" target="_blank">打开Vue功能模块</a>
<!-- 不想新开页面的话，去掉target="_blank"即可 -->

• 如果AngularJS的路由会拦截跳转（比如用了ui-router），可以用AngularJS的$window服务强制跳转：

// AngularJS控制器代码
app.controller('MainPageCtrl', ['$window', function($window) {
  this.openVueModule = function() {
    // 新开标签页打开
    $window.open('/vue-feature', '_blank');
    // 或者在当前页面跳转
    // $window.location.href = '/vue-feature';
  };
}]);

对应的模板按钮：

<button ng-click="mainPageCtrl.openVueModule()">打开Vue功能模块</button>

方案2：将Vue打包为UMD组件嵌入（同页面整合首选） #

如果需要在AngularJS页面内直接嵌入Vue模块（不是新开页面），可以把Vue项目打包成通用的UMD格式，然后在AngularJS项目中引入挂载。

操作步骤： #

1. 配置Vue项目打包（以Vue CLI为例）：
   在项目根目录的vue.config.js中添加打包配置：

module.exports = {
  configureWebpack: {
    output: {
      // 定义组件名称，后面要用到
      library: 'VueFeatureModule',
      libraryTarget: 'umd',
      umdNamedDefine: true
    }
  }
};

2. 执行npm run build，打包后dist目录会生成可复用的JS和CSS文件
3. 在AngularJS项目中引入资源：
   在AngularJS的index.html里引入Vue打包后的样式和脚本：

<link rel="stylesheet" href="/path/to/vue-dist/css/app.[hash].css">
<script src="/path/to/vue-dist/js/app.[hash].js"></script>

4. 挂载Vue组件到AngularJS页面：
   在AngularJS模板中预留挂载容器，然后在控制器中初始化Vue实例：

<!-- AngularJS模板中的挂载容器 -->
<div id="vue-module-container"></div>

// AngularJS控制器代码
app.controller('MainPageCtrl', function() {
  // 确保Vue脚本加载完成后初始化
  angular.element(document).ready(function() {
    new VueFeatureModule({
      el: '#vue-module-container'
    });
  });
});

方案3：用iframe嵌入（快速临时解决方案） #

如果赶时间或者不想修改两个项目的配置，可以用iframe直接嵌入Vue页面，适合需要在AngularJS页面内展示Vue内容的场景。

操作步骤： #

• 在AngularJS模板中添加iframe：

<iframe 
  src="/vue-feature" 
  width="100%" 
  height="600px" 
  frameborder="0" 
  title="Vue功能模块">
</iframe>

• 也可以通过AngularJS动态控制iframe的显示/隐藏：

// AngularJS控制器代码
app.controller('MainPageCtrl', function() {
  this.isVueModuleVisible = false;
  this.toggleVueModule = function() {
    this.isVueModuleVisible = !this.isVueModuleVisible;
  };
});

对应的模板：

<button ng-click="mainPageCtrl.toggleVueModule()">切换Vue模块显示</button>
<iframe 
  ng-if="mainPageCtrl.isVueModuleVisible"
  src="/vue-feature" 
  width="100%" 
  height="600px" 
  frameborder="0">
</iframe>

根据你的项目实际情况选就行：如果是两个独立部署的项目，方案1最省事；如果需要在同一页面深度整合，方案2更优雅；赶时间的话方案3可以快速落地。

内容的提问来源于stack exchange，提问作者CodeHunter