0


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

一. 需求

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

二. 编译

找到package.json 文件打开

执行编译命令

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

其中

  1. vue-tsc

是 Vue 3 项目中用于 TypeScript 类型检查的工具,它是 TypeScript 的一个增强版本,专门用于处理 Vue 文件(.vue 文件)的类型检查。运行

  1. vue-tsc

会检查 TypeScript 代码中的类型错误,但不会进行实际的编译操作。通常这一步用于确保代码中的类型安全性

其中

  1. vite build vite

是一个现代化的构建工具,用于开发和构建前端应用。

  1. vite build

命令会启动 Vite 的构建过程,将项目代码编译成生产环境使用的代码,并输出到

  1. dist

目录或其他指定目录。

其中

  1. node replace.js

运行一个 Node.js 脚本

  1. replace.js

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

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

三. 集成

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

四. 打开页面

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

  1. <template>
  2. <div class="html-container">
  3. <iframe :src="iframeSrc" width="100%" height="100%" frameborder="0"></iframe>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'HtmlPage',
  9. computed:{
  10. iframeSrc(){
  11. return '/finance-trade-campus-20240128/index.html' //指定文件路径
  12. }
  13. }
  14. }
  15. </script>
  16. <style scoped>
  17. .html-container {
  18. width: 100%;
  19. height: 110%;
  20. }
  21. </style>

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

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

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

本文转载自: https://blog.csdn.net/TjWpcxy/article/details/140814995
版权归原作者 小曲程序 所有, 如有侵权,请联系我们删除。

“将vue3 编译后集成到 若依的ruoyi-ui中”的评论:

还没有评论