提示：本系统使用vue3开发，外部第三方系统提供了一个dist前端静态资源包；要求在本系统内， 使用固定的路径跳转到dist内的第三方系统页面
例如：第三方需要加一个/pra路由跳转
文章目录
- 一、验证第三方dist前端包
- 1、注意项
- 2、本地启动dist服务和验证
- 二、本地系统集成
- 2.1本项目添加静态dist资源
- 2.2在本项目内添加路由配置
- 2.3在本项目内添加vue页面和跳转iframe
- 2.4本地验证
- 2.5本地打包验证
- 2.6测试
一、验证第三方dist前端包
1、注意项
第三方的dist包项目和本系统项目：
- vite.config.js的根目录配置的
base: './' - 路由采用hash模式
history: createWebHashHistory()
2、本地启动dist服务和验证
- 1.1首先将第三方的dist文件，拖拽到vscode里。使用vscode的Go Live启动dist文件
- 1.2通过启动的服务，输入对应第三方的路径看看是否可以跳转打开对应页面内容（报错是本身dist的第三方的页面就有报错，不用管）
如上，可以通过路径跳转到对应页面，证明第三方dist包没问题
二、本地系统集成
2.1本项目添加静态dist资源
需要将第三方的dist包内容，放在项目的/public文件夹下；至于放在哪个层级具体目录都可以，放在哪个层级目录，下一步的iframe的src就写哪个
例如：我的是将dist放在/public/applications/other-system-dist下
2.2在本项目内添加路由配置
2.3在本项目内添加vue页面和跳转iframe
例如/pra的跳转.vue内容
src/pages/other-system-dist/pra.vue
<template><div style="height: 100vh"><iframe src="./applications/other-system-dist/#/pra"style="width: 100%; height: 100%; border: none"></iframe></div></template><script setup>import{onMounted,}from'vue'defineOptions({name:'Pra'})onMounted(()=>{})</script>2.4本地验证
首先此时本地验证，跳转一定是会出现不正常的现象的；无需管他
本地跳转现象如下：
2.5本地打包验证
（可以先把接口服务那里写固定开发的ip+端口请求地址，否则可能会接口调用失败）
这一步才是验证上述的修改配置是否正确
- 将自己的本地项目进行打包，得到自己的前端包dist（注意这个dist包是你的项目前端包，不是第三方发你的那个dist）；
- 在
你自己项目的前端包dist里，可以看到本地项目加进去的第三方dist内容 - 然后启动go live得到一个ip+端口的项目地址，这个地址就是你本地dist的服务
2.6测试
在你本地的这个ip+端口的项目地址，输入对应路由查看页面即可
例如“/pra”跳转正常（报错是本身dist的第三方的页面就有报错，不用管）
)
