jquery项目嵌入vue3框架

本文介绍: 场景描述：公司已有jquery 后台管理类项目，想把项目升级为vue3框架，使用 gitee上已有vue3-el m ent–admin，因为旧项目功能模块非常多，重构十分耗费时间，所以决定在vue 框架上引入 jquery项目。

场景描述：公司已有jquery后台管理类项目，想把项目升级为vue3框架，使用 g i tee上已有vue3-elment–admin https://gitee.com/youlaiorg/vue3-element-admin，因为旧项目功能模块非常多，重构十分耗费时间，所以决定在vue 框架上引入 jquery项目。

方案：

1.v–html（不适用）

使用 v–html将jquery项目文件内容渲染到vue 文件中，这样做jquery项目中一些引入的一些js 文件链接会变成当前 vue项目启动路径，文件404，并不适用。

2.qiankun微前端（不适用）

jquery项目文件引入后，全局作用域发生变化，一些全局变量都获取不到，项目中使用的插件均失效，也不适用。

3.iframe（最终方案）

使用iframe后，可通过 postMe ssa g e进行页面间的通信

iframe具体实现 方法

1.准备工作，在src/router/下新建 mockRout es.ts，用来放测试的路由数据（这里要先看项目中已有的接口返回数据，根据格式编写假数据）
在这里插入图片描述

const localpath = "http://192.168.2.119:8081"
export const mockRoutes = [
  {
    path: '/test',
    component: "Layout",
    redirect: '/test',
    name: 'Test',
    meta: { title: 'jquery引入测试', icon: 'nested', roles: ['ADMIN'] },
    children: [
      {
        path: 'personnelFile',
        component: "iframe/index",
        name: 'PersonnelFile',
        meta: { title: '人员档案', roles: ['ADMIN'], query: { url: localpath + '/IntellSecurity-Web/page/personnelfile/personnelFile.jsp' }, iframe: true },
        children: [{
          path: 'view',
          iframeComponent: "iframe/index",
          name: 'personnelFileView',
          meta: { title: '查看个人档案', roles: ['ADMIN'], hidden: true}
        }, {
          path: 'myExamInfo/:tagText',
          component: "iframe/index",
          name: 'personnelFileViewExam',
          meta: { title: '考试详情', roles: ['ADMIN'], hidden: true }
        }]
      }
    ]
  }
]

路由的meta的query中的url就是跳转这个路由时，要打开的iframe的src 路径。
接下来在s rc/store/modules/permission.ts中，找到处理 menu 数据的函数，把上边的假数据添进去。
在文件上方引入

import { mockRoutes } from '@/router/mockRoutes';

找到generateRoutes函数，在里面拼接数据
在这里插入图片描述
 然后在src/v iew下创建iframe/index.vue，用来打开 jquery项目中的页面

&lt;template&gt;
  &lt;div class="app-container" style="height:100%;background-color: #f1f4f9;"&gt;
    <!-- <div id="childApp"&gt;</div&gt; --&gt;
    <iframe v-if="url" name="iframeChild" id="iframeChild" :src="url" width="100%" frameborder="0" scrolling="no"
      ref="iframeDom"&gt;</iframe>
    <Nodata v-else></Nodata>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import Nodata from '@/views/error-page/404.vue';
const route = useRoute();
let url = route?.query?.url;

</script>
<style lang="scss" scoped>
iframe {
  background: #f1f4f9;
  min-height: calc(100vh - 84px)
}