vue3项目跳转dist静态资源；vue3接入外部资源链接；vue3接入第三方dist

提示：本系统使用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的第三方的页面就有报错，不用管）