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

提示：本系统使用vue3开发，外部第三方系统提供了一个dist前端静态资源包；要求在本系统内，使用固定的路径跳转到dist内的第三方系统页面

例如：第三方需要加一个/pra路由跳转

文章目录

一、验证第三方dist前端包
- 1、注意项
- 2、本地启动dist服务和验证
二、本地系统集成

一、验证第三方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

javascript 复制代码

<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的第三方的页面就有报错，不用管）