0
点赞
收藏
分享

微信扫一扫

【 Kubernetes 风云录 】- Istio 应用多版本流量控制

回望这一段人生 2023-12-02 阅读 26

背景:

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

嵌套步骤

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

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

vue3管理平台框架使用了:

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

将项目下载运行即可

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

在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官方展示文档网站测试:

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

创建一个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指向

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>
举报

相关推荐

0 条评论