将vue3 编译后集成到 若依的ruoyi-ui中

一. 需求

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

二. 编译

找到package.json 文件打开

执行编译命令

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

其中

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页面

<template>
  <div class="html-container">
    <iframe :src="iframeSrc" width="100%" height="100%" frameborder="0"></iframe>
  </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文件 配置路由

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

 handleItemClick(item) {
        if(item.name === '3D导航'){
          window.open('html-page', '_blank');
        }
}