提示本系统使用vue3开发外部第三方系统提供了一个dist前端静态资源包要求在本系统内 使用固定的路径跳转到dist内的第三方系统页面例如第三方需要加一个/pra路由跳转文章目录一、验证第三方dist前端包1、注意项2、本地启动dist服务和验证二、本地系统集成2.1本项目添加静态dist资源2.2在本项目内添加路由配置2.3在本项目内添加vue页面和跳转iframe2.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.vuetemplatediv styleheight: 100vhiframe src./applications/other-system-dist/#/prastylewidth: 100%; height: 100%; border: none/iframe/div/templatescript setupimport{onMounted,}fromvuedefineOptions({name:Pra})onMounted((){})/script2.4本地验证首先此时本地验证跳转一定是会出现不正常的现象的无需管他本地跳转现象如下2.5本地打包验证可以先把接口服务那里写固定开发的ip端口请求地址否则可能会接口调用失败这一步才是验证上述的修改配置是否正确将自己的本地项目进行打包得到自己的前端包dist注意这个dist包是你的项目前端包不是第三方发你的那个dist在你自己项目的前端包dist里可以看到本地项目加进去的第三方dist内容然后启动go live得到一个ip端口的项目地址这个地址就是你本地dist的服务2.6测试在你本地的这个ip端口的项目地址输入对应路由查看页面即可例如“/pra”跳转正常报错是本身dist的第三方的页面就有报错不用管