一. 需求

 需要把vue3 的项目集成到 若依项目(没有分别部署的原因是 要获取登录信息 访问接口)

二. 编译 

找到package.json 文件打开

执行编译命令

"vue-tsc && vite build && node replace.js"是一个用来执行多个命令的复合命令，通常在命令行或脚本中使用 这些命令通过  && 连接在一起，表示它们将依次执行;

其中<code>vue-tsc 是 Vue 3 项目中用于 TypeScript 类型检查的工具，它是 TypeScript 的一个增强版本，专门用于处理 Vue 文件（.vue 文件）的类型检查。运行 vue-tsc 会检查 TypeScript 代码中的类型错误，但不会进行实际的编译操作。通常这一步用于确保代码中的类型安全性

其中vite build vite 是一个现代化的构建工具，用于开发和构建前端应用。vite build 命令会启动 Vite 的构建过程，将项目代码编译成生产环境使用的代码，并输出到 dist 目录或其他指定目录。

其中node replace.js  运行一个 Node.js 脚本 replace.js。这个脚本的功能取决于它的实际代码，通常用于处理一些构建后的额外任务，比如替换文件中的内容、进行文件处理或修改构建结果。

编译后会在当前文件目录生成 dist 文件

三. 集成

然后将文件放到 ruoyi-ui中(我这里修改了文件目录名称 以及 dist文件名称为 为finance-trade-campus-20240128) 

四. 打开页面

创建.vue文件用来 引入导入的vue3 文件的 html 的 index页面

<code><template>

<div class="html-container">code>

<iframe :src="iframeSrc" width="100%" height="100%" frameborder="0"></iframe>code>

</div>

</template>

<script>

export default {

name: 'HtmlPage',

computed:{

iframeSrc(){

return '/finance-trade-campus-20240128/index.html' //指定文件路径

}

}

}

</script>

<style scoped>

.html-container {

width: 100%;

height: 110%;

}

</style>

然后再src喜爱的router下的index.js文件 配置路由

然后再需要跳转的位置 打开该页面即可

<code> handleItemClick(item) {

if(item.name === '3D导航'){

window.open('html-page', '_blank');

}

}