使用Electron包装ruoyi-ui/ruoyi-vue实践总结

原创

已于 2023-08-10 11:00:33 修改 · 3.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#electron #ui #vue.js

于 2023-07-18 14:59:14 首次发布

文章介绍了如何利用Electron和Ruoyi框架快速开发桌面应用，强调了Node版本的重要性，详细讲述了从环境配置、前端工程改造到打包过程中的问题和解决方案，包括解决Vue路由、本地存储和权限设置等问题。

背景：最近公司新起的项目，由于工期、资源等原因，采用ruoyi框架快速实现开发，由于需要构建客户端，所以借助electron来实现。

electron 是使用javascript html css来构建跨平台的桌面应用程序。

官网地址：简介 | Electron

查了很多资料，好像后台管理做成客户端的很少很少，主要参考这篇文章：

ruoyi-vue | electron打包教程（超详细）_ruoyi 打包_七维大脑的博客-优快云博客

加上自己的实践，在这里记录一下过程以及踩过的坑。

一、基础环境说明

node：16.14.2 && 20.3.1 推荐nvm来管理切换

ruoyi-ui: 3.8.3

java：20

mysql：8.0

经过个人实践，主要就是node的版本比较重要，其他的不管是ruoyi-ui 还是ruoyi-vue，后端的java及mysq版本就更是毫无关系了。

二、ruoyi前端工程的改造

1.依赖安装

# electron
npm install electron

# 在 Electron 应用程序中安装和管理开发者工具
npm install electron-devtools-installer

# 简单的持久化数据存储库
npm install electron-store

# 在 Vue CLI 项目中集成 Electron 打包和构建
npm install vue-cli-plugin-electron-builder

如果安装错误的话，可以改一下安装源 npm install --registry=https://registry.npmmirror.com

是不是发现报错了呢？