ruoyi-vue | electron打包教程（超详细）

news2024/9/21 16:36:28

公司项目由于来不及单独做客户端了，所以想到用electron直接将前端打包程exe,dmg等格式的安装包。
由于使用的ruoyi-vue框架开发，所以这篇教程以ruoyi-vue为基础的。

环境说明

  1. nodejs：v16.18.1
  2. npm：8.19.2
  3. ruoyi-vue：3.8.6

环境部署

下载若依并安装依赖

ruoyi-vue：https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖 强烈建议不要用直接使用
# cnpm 安装，会有各种诡异的 bug
# 可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com

安装electron相关插件

# electron
npm install electron

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

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

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

如果报错，大概率是网络问题。可以尝试科学上网或指定安装源：

# electron
npm install electron --registry=https://registry.npmmirror.com

# 在 Electron 应用程序中安装和管理开发者工具
npm install electron-devtools-installer --registry=https://registry.npmmirror.com

# 简单的持久化数据存储库
npm install electron-store --registry=https://registry.npmmirror.com

# 在 Vue CLI 项目中集成 Electron 打包和构建
npm install vue-cli-plugin-electron-builder --registry=https://registry.npmmirror.com

在这里插入图片描述

修改ruoyi-vue相关配置/代码（很重要）

在修改前建议使用git的朋友另外起一个分支，没有用git的朋友备份一份代码。
因为你的应用应该不止是提供客户端还需要提供web端，经过下面的修改操作有部分功能将会不太适合web端。切记！！

修改.env.production生产环境配置

（如果不改调用的接口的前缀将变成本地目录）

找到这段配置：

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

如果项目web前端没有部署改为线上后端地址：

VUE_APP_BASE_API = 'http://localhost:8080'

如果项目web前端已经部署可写改为：

VUE_APP_BASE_API = 'http://IP/prod-api'

在这里插入图片描述

注释掉v-clipboard 文字复制剪贴

（为了解决clipboard报错）

找到：ruoyi-ui/src/directive/module/clipboard.js，然后全部注释掉。

修改 vue.config.js 配置

（不修改会找不到静态资源和接口无法访问）

位置：ruoyi-ui/vue.config.js

# 修改静态资源路径
publicPath: './',
 
# 修改为实际接口地址
target: `http://localhost:8080`

在这里插入图片描述

修改路由配置（Router）

(解决部分无法跳转问题)

找到：ruoyi-ui/src/router/index.js

# 原配置
export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

# 改为：
# 路由模式改为hash意味着在URL中使用hash（#）来表示路由路径
export default new Router({
  mode: 'hash', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

全局修改Cookies为localStorage（重要）

（如果不修改，登录等使用Cookies的场景将无法继续，比如登录无法跳转到主页面。）

  1. 全局搜索Cookies.get并替换为localStorage.getItem
    在这里插入图片描述

  2. 全局搜索Cookies.set并替换为localStorage.getItem

    然后找到：ruoyi-ui/src/views/login.vue

将：

localStorage.setItem("username", this.loginForm.username, { expires: 30 });
localStorage.setItem("password", encrypt(this.loginForm.password), { expires: 30 });
localStorage.setItem('rememberMe', this.loginForm.rememberMe, { expires: 30 });

替换为：

localStorage.setItem("username", this.loginForm.username);
localStorage.setItem("password", encrypt(this.loginForm.password));
localStorage.setItem('rememberMe', this.loginForm.rememberMe);

也就是把过期时间删掉了。

在这里插入图片描述

  1. 全局搜索Cookies.get并替换为localStorage.getItem

在这里插入图片描述

全局修改path.resolve为path.posix.resolve

（为了解决菜单栏跳转为404的问题）

electron中的路由跳转路径解析path.resolve结果与在浏览器中的web项目解析结果不一致

path 模块的默认操作会因 Node.js 应用程序运行所在的操作系统而异。 具体来说，当在 Windows 操作系统上运行时， path模块会假定正被使用的是 Windows 风格的路径。

path.posix 属性提供对 path 方法的 POSIX 特定实现的访问。(意思就是无视操作系统的不同，统一为 POSIX方式，这样可以确保在任何系统上结果保持一致)

全局搜索path.resolve并替换为path.posix.resolve

在这里插入图片描述

修复无法退出登录问题

（主要修改一下退出登录后跳转的页面）

位置：ruoyi-ui/src/layout/components/Navbar.vue
找到：

async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    }

修改为：

async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login'; // 可以改为login
        })
      }).catch(() => {});
    }

package.json新增electron打包配置

位置：ruoyi-ui/package.json

找到scripts，新增以下配置：

"electron:serve": "vue-cli-service electron:serve",
"electron:build": "vue-cli-service electron:build",
"electron:build:win32": "vue-cli-service electron:build --win --ia32"

在这里插入图片描述

electron配置

新增background.js

在src新建background.js

（background.js名字不可修改，否则会报错）

'use strict'

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
const Store = require('electron-store');

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      contextIsolation:false,     //上下文隔离
      enableRemoteModule: true,   //启用远程模块
      nodeIntegration: true, //开启自带node环境
      webviewTag: true,     //开启webview
      webSecurity: false,
      allowDisplayingInsecureContent: true,
      allowRunningInsecureContent: true
    }
  })
  win.maximize()
  win.show()
  win.webContents.openDevTools()
  ipcMain.on('getPrinterList', (event) => {
    //主线程获取打印机列表
    win.webContents.getPrintersAsync().then(data=>{
      win.webContents.send('getPrinterList', data);
    });
    //通过webContents发送事件到渲染线程，同时将打印机列表也传过去

  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')


  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  Store.initRenderer();
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {

  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

引入electron.config.js

位置：ruoyi-ui/package.json
新增："main": "electron.config.js",
在这里插入图片描述

执行打包

npm run electron:build

打包完成后会生成：dist_electron目录

在这里插入图片描述

其他

结束了，有问题可留言讨论。欢迎评论，点赞，收藏。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/714279.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于SQLI的SQL字符型报错注入

基于SQLI的SQL字符型报错注入

基于SQLI的SQL字符型报错注入 一. 实验目的 理解数字型报错SQL注入漏洞点的定位方法，掌握利用手工方式完成一次完整SQL注入的过程，熟悉常见SQL注入命令的操作。 二. 实验环境 渗透主机：KALI平台 用户名: college 密码: 360College 目标网…
阅读更多...
Windows 10 执行wsl命令报错: --list -o命令行选项无效 --update命令行选项无效等解决办法

Windows 10 执行wsl命令报错: --list -o命令行选项无效 --update命令行选项无效等解决办法

问题说明 在使用wsl命令的时候，wsl --update，wsl --list -o等关键的命令都显示命令行选项无效 但是wsl这个命令却又是一个有效的命令 解决办法 1.卸载旧版本的WSL 没有子系统可以跳过这个步骤 打开命令提示符或PowerShell窗口（以管理员身…
阅读更多...
深蓝学院C++基础与深度解析笔记 第 10 章 泛型算法与 Lambda 表达式

深蓝学院C++基础与深度解析笔记 第 10 章 泛型算法与 Lambda 表达式

第 10 章 泛型算法与 Lambda 表达式 1. 泛型算法 1.1 泛型算法&#xff1a; 可以支持多种类型的算法。 int x[100]; std::sort(std: : begin(x), std : :end(x));1.11 这里重点讨论 C 标准库中定义的算法&#xff1a; <algorithm > <numeric> <ranges> 1.…
阅读更多...
简洁清新后台模板推荐（光年）

简洁清新后台模板推荐（光年）

目录 前言一、后台模板介绍1.作者介绍2.模板介绍 二、界面展示1.登录2.首页3.UI元素4.表单5.工具类6.示例页面7.主题选择 三、入口总结 前言 作为后端开发人员&#xff0c;前端技术确实不精通&#xff0c;也没有太多的精力搞前端。所以一直在搜寻一些现成的模板。最近发现一个…
阅读更多...
基于单片机的盲人导航智能拐杖老人防丢防摔倒发短息定位

基于单片机的盲人导航智能拐杖老人防丢防摔倒发短息定位

功能介绍 以STM32单片机作为主控系统&#xff1b; OLED液晶当前实时距离&#xff0c;安全距离&#xff0c;当前经纬度信息&#xff1b;超声波检测小于设置的安全距离&#xff0c;蜂鸣器报警提示&#xff1a;低于安全距离&#xff01;超声波检测当前障碍物距离&#xff0c;GPS进…
阅读更多...
Linux-CentOS7版本的系统搭建达梦数据库

Linux-CentOS7版本的系统搭建达梦数据库

目录 VMware中安装CentOS 7.5并做相关的配置搭建Docker环境搭建达梦数据库拉取镜像查看镜像命令为镜像设置一个别名根据镜像 创建一个容器 根据镜像 创建一个容器启动并进入容器 VMware中安装CentOS 7.5并做相关的配置 使用VMware安装CentOS7的虚拟机可以参考另外一篇文章&…
阅读更多...
netwox构造免费ARP数据包【网络工程】（保姆级图文）

netwox构造免费ARP数据包【网络工程】（保姆级图文）

目录 构造免费的 ARP 数据包。1) 构造免费的 ARP 数据包2) 使用 Wireshark 进行抓包 总结 欢迎关注 『网络工程专业』 系列&#xff0c;持续更新中 欢迎关注 『网络工程专业』 系列&#xff0c;持续更新中 温馨提示&#xff1a;对虚拟机做任何设置&#xff0c;建议都要先快照备…
阅读更多...
Android修改符盘名称与蓝牙名称

Android修改符盘名称与蓝牙名称

修改符盘名称 android\frameworks\base\media\java\android\mtp\MtpDatabase.java 修改蓝牙名称 android\system\bt\btif\src\btif_dm.cc 注&#xff1a;尽量不在build与device文件下修改设备名称&#xff0c;因为这是套指纹的软件 这里的值必须和之前的软件是一样的
阅读更多...
Spring Cloud Feign: 了解、原理和使用

Spring Cloud Feign: 了解、原理和使用

Spring Cloud Feign: 了解、原理和使用 Spring Cloud Feign 是 Spring Cloud 生态系统中的一个重要组件&#xff0c;它提供了一种声明式的、基于注解的 REST 客户端&#xff0c;能够方便地实现服务之间的调用和通信。在本文中&#xff0c;我们将介绍 Spring Cloud Feign 的概念…
阅读更多...
链码的打包与升级

链码的打包与升级

目录 1、链码的打包与签名 ​编辑 对链码的签名 1、安装已经添加签名的链码 2、安装成功之后进行链码的实例化操作&#xff0c;同时指定其背书策略 测试 1、查询链码 2、调用链码 3、查询链码 链码的升级 1、安装链码 2、升级链码 3、测试 1、查询 2、调用 3、…
阅读更多...
【花雕】全国青少年机器人技术一级考试备考实操搭建手册3

【花雕】全国青少年机器人技术一级考试备考实操搭建手册3

目录 1、秋千 2、跷跷板 3、搅拌器 4、奇怪的钟 5、起重机 6、烤肉架 7、手摇风扇 8、履带车 9、直升机 10、后轮驱动车 搅拌器是一种可以帮助我们将不同的物质混合在一起的机器。它通常由一个电动机和一个搅拌器头组成。当我们把需要混合的物质放入容器中&#xff0c;打开搅拌…
阅读更多...
C语言之函数递归

C语言之函数递归

前言 　　从前有座山&#xff0c;山里有座庙&#xff0c;庙里有个老和尚&#xff0c;正在给小和尚讲故事呢&#xff01;故事是什么呢&#xff1f;"从前有座山&#xff0c;山里有座庙&#xff0c;庙里有个老和尚&#xff0c;正在给小和尚讲故事呢&#xff01;故事是什么呢&…
阅读更多...
字典树的数据结构

字典树的数据结构

Trie字典树主要用于存储字符串&#xff0c;Trie 的每个 Node 保存一个字符。用链表来描述的话&#xff0c;就是一个字符串就是一个链表。每个Node都保存了它的所有子节点。 例如我们往字典树中插入see、pain、paint三个单词&#xff0c;Trie字典树如下所示&#xff1a; 也就是…
阅读更多...
zookeeper的动态扩容

zookeeper的动态扩容

附属意义的扩容&#xff1a;扩容的新增节点为观察者observer 1.观察者概念&#xff1a; a.在zookeeper引入此新的zookeeper节点类型为observer&#xff0c;是为了帮助处理投票成本随着追随者增加而增加的问题并且进一步完善了zookeeper的可扩展性 b.观察者不参与投票&#x…
阅读更多...
【机器学习】基于卷积神经网络 CNN 的猫狗分类问题

【机器学习】基于卷积神经网络 CNN 的猫狗分类问题

文章目录 一、卷积神经网络的介绍1.1 什么是卷积神经网络1.2 重要层的说明1.3 应用领域二、 软件、环境配置2.1 安装Anaconda2.2 环境准备 三、猫狗分类示例3.1 图像数据预处理3.2 基准模型3.3 数据增强3.4 dropout层四、总结 一、卷积神经网络的介绍 1.1 什么是卷积神经网络 …
阅读更多...
决策树ID3

决策树ID3

文章目录 题目一基础知识解题过程①算总的信息量②求解各个指标的信息增益&#xff0c;以此比较得出根节点③ 从根节点下的晴天节点出发循环上述步骤④ 从根节点下的多云节点出发&#xff0c;循环上述步骤⑤ 从根节点下的雨节点出发&#xff0c;循环上述步骤⑥画出最终的决策树…
阅读更多...
ChatGPT实战：职业生涯规划

ChatGPT实战：职业生涯规划

ChatGPT的出现&#xff0c;不仅改变了人们对人工智能技术的认识&#xff0c;也对经济社会发展产生了深远的影响。那么&#xff0c;在ChatGPT时代&#xff0c;人们应该如何规划自己的职业呢&#xff1f; 职业规划是一个有意义且重要的过程&#xff0c;它可以帮助你在职业生涯中取…
阅读更多...
避坑指南：当你将 Django 项目部署到 Heroku 你需要避多少坑？

避坑指南：当你将 Django 项目部署到 Heroku 你需要避多少坑？

文章目录 Cors 跨域问题localhost 阶段Heroku 部署阶段 Procfile 启动文件Database 数据库相关内容localhost 阶段Heroku 部署阶段settings.py 中 正确的设置方式官方给出的 settings.py makemigration & migrate 数据迁移 requirements.txt & runtime.txt 版本和库总结…
阅读更多...
如何记录程序运行时间

如何记录程序运行时间

使用c标准库中时钟类来实现。 使用模板类&#xff1a; chrono::duration<int,ratio<1,2>(20)>前面的int限定了延时单位是一个整数。只要1小时&#xff0c;2小时&#xff0c;但是没有1.5小时。ratio<1,2>代表一个分数。后面的2代表分母&#xff0c;前面的1为分…
阅读更多...
Keil5中写的软件延时函数不起作用现象解析_ARM_Compiler_volatile关键字

Keil5中写的软件延时函数不起作用现象解析_ARM_Compiler_volatile关键字

一、问题描述 在学习野火霸天虎F407寄存器点亮LED时&#xff0c;出现实验现象&#xff1a;LED灯不亮&#xff0c;野火霸天虎F407资料。 main.c代码如下&#xff1a; #include "stm32f4xx.h"void Delay(unsigned int count);int main(void) { #if 0/* 第一步&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023