在vue3项目嵌套导入老项目 jQuery项目，减少重复开发

Lan.W

已于 2023-12-02 16:06:09 修改

阅读量655

点赞数

文章标签： jquery vue.js 前端

于 2023-12-02 15:41:52 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/134753164

版权

背景：

公司管理平台项目一直是前辈用jQuery做的，为扩展根据自身的技术栈，将jQuery的老项目嵌套入vue3的框架，新功能用vue开发，旧的功能不动直接在vue3用iframe容器来展示

嵌套步骤

2种方式嵌套，一个是已经上线的网站，一个是本地静态页面html

一、嵌套一个已经部署好的jQuery网站

vue3管理平台框架使用了：

vue3-element-admin: 🔥Vue3 + Vite + TypeScript + Element-Plus的后台管理系统模板，配套接口文档和后端源码，vue-element-admin的Vue3版本。

将项目下载运行即可

# 切换目录
cd vue3-element-admin

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

打开项目先写一个路由跟菜单栏

在src/router目录创建一个mockRouter.ts，用来配置菜单跳转到iframe，效果如下，点击的菜单出来了。

mockRouter.ts源码

 
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: 'https://cn.vuejs.org/' }, 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 }
        }]
      }
    ]
  }
]

老项目的路径，我用vue3官方展示文档网站测试：

url: 'https://cn.vuejs.org/'

可以根据自己的项目部署路径配置

创建一个iframe容器用于嵌套展示原来的html

/views/iframe/index.vue 源码

<template>
  <div class="app-container" style="height:100%;background-color: #f1f4f9;">
    <!-- <div id="childApp"></div> -->
    <iframe v-if="url" name="iframeChild" id="iframeChild" :src="url" width="100%" frameborder="0" scrolling="no"
            ref="iframeDom"></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?.meta.query?.url; 
console.log(useRoute())

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

在这里iframe：指向路径为： 'https://cn.vuejs.org/' ，运行效果。

二、嵌套一个当前本地jQuery项目（本地html)

如果要指向当前项目静态页面html,可以放在index.html目录下。然后修复配置的路由mockRouters.ts指向

//meta: { title: '老项目', roles: ['ADMIN'], query: { url: 'https://cn.vuejs.org/' }, iframe: true },
 meta: { title: '老项目', roles: ['ADMIN'], query: { url: 'http://localhost:3000/test/test1.html' }, iframe: true },

vue3项目运行的配置是：http://localhost:3000/，然后要指向的静态页面路由配置url： 'http://localhost:3000/test/test1.html'

当前vue项目其他静态jQuery页面html运行项目效果

test1.html源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="overview" style="background-color: #bfc;height: 200px;width: 200px">TEST</div>
</body>
</html>

Lan.W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
在vue3项目嵌套导入老项目 jQuery项目，减少重复开发

公司管理平台项目一直是前辈用jQuery做的，为扩展根据自身的技术栈，将jQuery的老项目嵌套入vue3的框架，新功能用vue开发，旧的功能不动直接在vue3用iframe容器来展示。打开项目先写一个路由跟菜单栏。
复制链接

扫一扫