若依前后端分离版使用Electron打包前端Vue为Exe文件

1.前言

本文详细介绍如何使用electron将若依框架前后端分离版的前端Vue页面打包为Exe文件,并且包括如何实现应用更新。使用若依基础代码体现不出打包功能,因此我使用开发的文件管理系统,介绍上述过程,具体可以查看我的文章《若依前后端分离版实现文件管理》。虽然没有使用若依基础代码,但是打包过程是完全一样的。本文章完全免费,使用若依版本为3.8.9。打包之前,复制一份前端代码进行,不要在原来前端代码基础上打包,因为exe打包修改的配置会影响原来PC端的功能。

2.安装插件

1.在终端执行下面代码,查看当前镜像库。

npm get registry 

2.如果当前镜像不是上面地址,执行下面代码,将镜像设置淘宝镜像。再次执行上面代码,查看镜像库是否正确。

npm config set registry https://registry.npmmirror.com/

3.在终端依次执行下面代码,安装这个5个插件到ruoyi-ui。

npm install electron
npm install electron-devtools-installer
npm install electron-store
npm install vue-cli-plugin-electron-builder
npm install electron-updater

4.如果安装失败,请使用科学上网的方式进行安装,具体如何科学上网,这里就不介绍了。如果使用科学上网的方式还是安装失败,可以在科学上网的前提下依次执行下面代码。此种方式,应该能够解决大部分问题,不行就多尝试几次。如果还是不行,只能自己想办法安装这几个插件了。


npm install electron --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-devtools-installer --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-store --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install vue-cli-plugin-electron-builder --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-updater --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/

5.在IDEA终端执行下面代码,进入ruoyi-ui文件夹(如果没有IDEA在cmd界面执行一样。)。

cd ruoyi-ui

5.在IDEA终端执行下面代码,查看vue版本。

vue --version

6.如果提醒“ 'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。 ”继续在IDEA终端中执行下面代码。先不要关闭窗口,

npm root -g

7.Win + R 输入 sysdm.cpl,按回车或点击“确定”按钮,打开环境变量设置。

8.选择“高级”,点击“环境变量”。

9.选择系统变量下面的Path选项,点击“编辑”按钮。

10.复制第6步的值,不要全部复制,复制到node_global路径即可。比如:我的第6步显示:D:\work\nodejs\node_global\node_modules,我需要复制D:\work\nodejs\node_global。

点击“新建”按钮,将复制的路径,加入到最后。添加完成后,点击“确定”按钮。

11.再次点击“确定”按钮。之后,再此打开环境变量,找到刚才位置,确认下是否保存成功。

12.环境变量重新保存的前提下,关闭IDEA,再次打开。如果使用cmd,请关闭后,再打开。如果执行下面代码,显示版本号了,就代表配置成功了。如果关闭后再打开不生效,请重启下电脑。

vue --version

13.在IDEA终端执行下面代码,会提示选择版本,选择最新版,然后回车。等待添加完成后,打开前端文件,如果再src文件夹下多了个backgroud.js文件,代表添加成功。

 vue add electron-builder

如果卡住了,不用关,只要前端成功添加了backgroud.js文件即可。

等待backgroud.js文件添加成功,通过Ctrl+C两次,强制停止IDEA终端。不然后面打包时,会出现异常。

一定不要在vs终端执行上面代码,会报错。

14.打开package.json文件,由于我安装的nodejs版本较高,将electron:build和electron:serve添加以下前缀。并不是所有人都需要添加此配置,如果原来代码,再不添加的前提下可以运行,就不用添加。

SET NODE_OPTIONS=--openssl-legacy-provider && 

3.修改原文件

1.打开router/index.js,将路由模式改为hash。如果不修改,打包后直接无法显示页面。

2.通过Vs的全局搜索功能,1. 将所有文件中的Cookies.get替换为localStorage.getItem,将Cookies.set全部替换为localStorage.setItem,Cookies.remove全部替换为localStorage.removeItem。如果不修改,使用Cookies的地方都报错。比如:点击“登录”按钮后无反应,因为登录页面就使用了Cookies。

3. 打开src/layout/components/Navbar文件,设置退出后,跳转到登录页。如果不设置,退出后,显示空白页。

this.$router.push('/login');

4.打开src\utils\request.js文件,修改登录超时页面跳转。导入路由插件,实现路由调转。

import router from '@/router'
router.push('/login');

4.配置Electron

1.打开vue.config.js文件,在module.exports中,增加Electron配置,配置代码如下。下面配置上都有说明,就不一一介绍了,主要介绍下容易出错的配置。

// electron配置
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: false, //禁止 Node.js 直接运行,提升安全性
      contextIsolation: true, //使 `preload.js` 安全地暴露 API
      enableRemoteModule: false, // 禁止 `remote`,避免被攻击

      builderOptions: {
        appId: 'com.py',  // appid
        productName: 'py', // 生产名称
        copyright: "Copyright © 2018-2025",
        asar: true, //启用 asar 打包,防止文件被篡改
        directories: {
          output: "dist_electron", //指定打包后的文件夹
          buildResources: "src/assets" //资源文件路径(图标等)
        },

        nsis: {
          oneClick: false, // 允许用户自定义安装路径
          allowToChangeInstallationDirectory: true, // 允许用户修改安装路径
          perMachine: true, // 所有用户都可安装(系统级安装)
          allowElevation: true, // 允许以管理员权限运行
          createDesktopShortcut: true, // 创建桌面快捷方式
          createStartMenuShortcut: true, // 创建开始菜单快捷方式
          shortcutName: "若依管理系统", // 自定义快捷方式名称
          installerIcon: "src/assets/logo/piaoyi_stall.ico", // 安装程序图标
          uninstallerIcon: "src/assets/logo/piaoyi_stall.ico", // 卸载程序图标
          installerHeaderIcon: "src/assets/logo/piaoyi_stall.ico", // 安装界面标题图标
        },

        win: {
          // 下方任务栏图标
          icon: "src/assets/logo/piaoyi.ico",
          target: [
            {
              target: "nsis", //生成 Windows 安装包
              arch: ["ia32", "x64"] // 32 位 & 64 位兼容
            }
          ],
          // 安装包文件名
          artifactName: "py_${version}.${ext}"
        },

        publish: [
          {
            provider: "generic", // 允许手动配置更新服务器
            url: "http://localhost:8080/profile/" // 更新服务器地址
          }
        ],
         // 额外打包资源,会打包到resources文件夹,使用时加上此文件夹路径
         extraResources: [
          // 打包应用左上角图标
          {
            from: "src/assets/logo/piaoyi_stall.ico",
            to: "logo/logo.ico",
          }
        ]
      }
    }
  }

注意:

1.上面的所有图标必须要求为.ico格式,并且最小为256*256。icon格式转换后的图片有可能无法识别,导致报错。我使用的wps,如果关于图标报错,一定按照上面要求,如果还是不行,就得换个转换软件了。

2.publish.url为更新文件的地址,需要为一个后端映射的文件夹,我使用了若依文件后端映射文件夹的根路径。需要更新文件时,将打包后的exe文件和latest.yml文件上传到这个文件夹,应用会自动更新。

3.extraResources配置项导出到打包文件,能够和public文件夹下的文件类似,我这将一个icon导出到了打包文件夹。需要注意的是,会将文件导出到resources文件夹下,因此使用文件时,需要加上此文件夹前缀,具体可以看backgroud.js文件中icon配置。

2.打开.env.production文件,将VUE_APP_BASE_API改为后端地址。因为electron自动读取这个文件中的配置,一定不要和vue一样加上访问前缀。真正发布时,后端地址肯定需要映射到外网,就和小程序或者APP的后端类似。

3.打开src\background.js文件,用以下代码替换。一般根据实际情况修改icon即可,如果调试阶段可以win.webContents.openDevTools()代码注释去掉,会显示一个类似于web调试的框。

'use strict'

import { app, protocol, BrowserWindow, Menu, dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
//手动配置当前环境
const isDevelopment = process.env.NODE_ENV !== 'production'

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

async function createWindow() {
  // 关闭顶部导航菜单栏
  Menu.setApplicationMenu(null)
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1000,
    height: 800,
    // 应用左上角图标
    icon: "resources/logo/logo.ico",
    webPreferences: {

      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  // 启动自动更新检查
  checkForUpdates();

  //打开调试框
  // win.webContents.openDevTools()

  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 () => {
  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()
    })
  }
}

// 自动更新逻辑
function checkForUpdates() {
  autoUpdater.autoDownload = false; // 禁止自动下载,让用户手动确认
  autoUpdater.checkForUpdates();

  // 有新版本可用
  autoUpdater.on('update-available', (info) => {
    dialog.showMessageBox({
      type: 'info',
      title: '更新可用',
      message: `发现新版本 ${info.version},是否立即更新?`,
      buttons: ['是', '否']
    }).then((result) => {
      if (result.response === 0) {
        autoUpdater.downloadUpdate();
      }
    });
  });

  // 更新下载完成
  autoUpdater.on('update-downloaded', () => {
    dialog.showMessageBox({
      type: 'info',
      title: '更新完成',
      message: '更新下载完成,是否立即安装?',
      buttons: ['立即安装', '稍后']
    }).then((result) => {
      if (result.response === 0) {
        autoUpdater.quitAndInstall();
      }
    });
  });

  // 更新错误
  autoUpdater.on('error', (error) => {
    dialog.showErrorBox('更新错误', error == null ? "未知错误" : error.toString());
  });
}

4.上面设置了很多东西,就是没有应用版本号。应用版本号对更新很重要,会自动读取package.json文件中的version,可以根据实际情况修改。我这里修改成1.0.0,方便以后的更新测试。

5.复制icon到文件夹,请根据实际情况修改icon相关代码。

5.打包与更新

1.执行下面代码,进行打包。

npm run electron:build

2.以为要成功了,结果插件报错了,只能重新安装下。先要强制结束下2.13步骤中,IDEA终端中的命令,不然会显示electron占用。重新安装下还是不行,直接删除node_modules文件夹下所有内容,并且删除了 package-lock.json文件。然后再执行npm install安装所有插件命令,终于可以打包了。

3.第一次打包需要从github上下载相关依赖,如果速度很慢,可以强制停止了这个程序,然后使用了科学上网的方式,再次打包。以后打包,不删除win-相关的文件夹,就不用使用科学上网的方式进行打包了。通过不断尝试,终于打包成功了,一般出问题就是插件原因,这也是没办法,只能不断下载。

4.将py_1.0.0.exe和latest.yml文件,复制到若依后端映射文件夹根目录下。

5.执行py_1.0.0.exe文件,根据步骤选择安装路径,进行安装。

6.成功启动,登录后,测试功能正常。

文件预览功能也能正常使用,其他功能也能正常,其他功能不一一测试了。需要注意点是web新开网页,在应用中会新打开个窗口。

7.打开package.json文件,修改version为1.0.1,然后重新打包。

8.等待打包成功,将最新打包的exe文件和latest.yml文件,复制到若依后端映射文件夹根目录下。

9.关闭刚才的应用,然后重新打开。会提醒更新消息,点击“是”。

10.点击“立即安装”按钮。

11.自动安装,会显示安装进度,由于截图有点慢,更新完了。

6.总结

electron打包还是比较简单的,只要复制我上面的配置文件,并且按照我的过程修改原文件就能使用。很多坑我都给踩了,超时或退出登录白屏问题等问题,但是那个插件安装容易出错问题,我真的无能为力,大家只能多尝试几次了,要敢于尝试,代码一般不会出问题的。

如果本文章对您有帮助的话,并且条件允许的话,可以给我打赏下。不打赏也没关系,您可以给我点赞支持下,您的支持就是我最大的动力。关注我的小伙伴应该发现了,我写文章过程会非常具体,希望每个小伙伴都能够跟着文章完成操作。我会不定时发布一些关于若依框架、java、Vue、uniapp等方面的内容,如果感兴趣的话,可以关注我。如果您需要前后端分离版的文件预览系统、流程管理系统或其他以上四方面涉及的内容,查看我的主页一定不后悔。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker:Dockerfile案例之自定义centos7镜像

1 案例需求 自定义centos7镜像。要求&#xff1a; 默认登录路径为 /usr可以使用vim 2 实施步骤 编写dockerfile脚本 vim centos_dockerfile 内容如下&#xff1a; #定义父镜像 FROM centos:7#定义作者信息 MAINTAINER handsome <handsomehandsome.com># 设置阿里云…

SpringBoot校园管理系统设计与实现

在现代校园管理中&#xff0c;一个高效、灵活的管理系统是不可或缺的。本文将详细介绍基于SpringBoot的校园管理系统的设计与实现&#xff0c;涵盖管理员、用户和院校管理员三大功能模块&#xff0c;以及系统的部署步骤和数据库配置。 管理员功能模块 管理员是系统的核心管理…

[项目]基于FreeRTOS的STM32四轴飞行器: 四.LED控制

基于FreeRTOS的STM32四轴飞行器: 四.LED控制 一.配置Com层二.编写驱动 一.配置Com层 先在Com_Config.h中定义灯位置的枚举类型&#xff1a; 之后定义Led的结构体&#xff1a; 定义飞行器状态&#xff1a; 在Com_Config.c中初始化四个灯&#xff1a; 在Com_Config.h外部声明…

Linux部署java项目

前言 Xshell下载地址 点击连接 常见命令 ls ls:显示当前目录下的文件 ll:可以显示隐藏文件和非隐藏文件与ls -l一样 ls -a -l这两个掌握就可以了 ls --help就可以知道这个后面可以跟什么 ls -al还可以这样 cd cd&#xff1a;进入文件夹 cd后面可以跟相对路径&#xff0…

鸿蒙Android4个脚有脚线

效果 min:number122max:number150Row(){Stack(){// 底Text().border({width:2,color:$r(app.color.yellow)}).height(this.max).aspectRatio(1)// 长Text().backgroundColor($r(app.color.white)).height(this.max).width(this.min)// 宽Text().backgroundColor($r(app.color.w…

盛铂科技 SLMF315频率综合器200MHz至15GHz 国产频综模块

在当今科技飞速发展的时代&#xff0c;射频技术在众多领域发挥着关键作用&#xff0c;从通信、雷达系统到科研实验&#xff0c;对频率综合器的性能要求日益严苛。以下是关于盛铂科技的 SLMF315 超低相位噪声频率综合器的介绍&#xff1a; SLMF315超低相位噪声0.2至15GHz频率综合…

wheel_legged_genesis 开源项目复现与问题记录

Reinforcement learning of wheel-legged robots based on Genesis System Requirements Ubuntu 20.04/22.04/24.04 python > 3.10 开始配置环境&#xff01; 点击releases后进入&#xff0c;下载对应最新版本的代码&#xff1a; 将下载后的代码包解压到你的自定义路径下&…

软考架构师笔记-计算机网络

1.9 计算机网络 OSI/RM 七层模型 物理层 二进制传输(中继器、集线器) (typedef) 数据链路层 传送以帧为单位的信息(网桥、交换机、网卡) 网络层 分组传输和路由选择(三层交换机、路由器)ARP/RARP/IGMP/ICMP/IP 传输层 端到端的连接(TCP/UDP)在前向纠错系统中&#xff0c;当接…

Qt6.8.2创建WebAssmebly项目使用FFmpeg资源

Qt6新出了WebAssmebly功能&#xff0c;可以将C写的软件到浏览器中运行&#xff0c;最近一段时间正在研究这方便内容&#xff0c;普通的控件响应都能实现&#xff0c;今天主要为大家分享如何将FFmpeg中的功能应用到浏览器中。 开发环境&#xff1a;window11&#xff0c;Qt6.8.2…

浅论数据库聚合:合理使用LambdaQueryWrapper和XML

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数据库聚合替代内存计算&#xff08;关键优化&#xff09;二、批量处理优化四、区域特殊处理解耦五、防御性编程增强 前言 技术认知点&#xff1a;使用 XM…

DeepSeek大模型深度解析:架构、技术与应用全景

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。https://www.captainbed.cn/north 文章目录 一、大模型时代与DeepSeek的定位1.1 大模型发展历程回顾大模型发展历程时间轴&#xff08;20…

极狐GitLab 正式发布安全版本17.9.1、17.8.4、17.7.6

本分分享极狐GitLab 补丁版本 17.9.1、17.8.4、17.7.6 的详细内容。这几个版本包含重要的缺陷和安全修复代码&#xff0c;我们强烈建议所有私有化部署用户应该立即升级到上述的某一个版本。对于极狐GitLab SaaS&#xff0c;技术团队已经进行了升级&#xff0c;无需用户采取任何…

windows server 2019创建教程,新建存储池,新建虚拟磁盘,文件共享

1.网页地址Windows Server 2019 ISO镜像下载 - 我的MSDN 迅雷下载路径ed2k://|file|cn_windows_server_2019_updated_jan_2020_x64_dvd_4bbe2c37.iso|5608552448|39C663ABF26079240030395C7CB3F975|/ 开始创建 注意;虽然我们的镜像是windows server2019,但是虚拟机最高只能选w…

Linux系统之配置HAProxy负载均衡服务器

Linux系统之配置HAProxy负载均衡服务器 前言一、HAProxy介绍1.1 HAProxy简介1.2 主要特点1.3 使用场景二、本次实践介绍2.1 本次实践简介2.2 本次实践环境规划三、部署两台web服务器3.1 运行两个Docker容器3.2 编辑测试文件3.3 访问测试四、安装HAProxy4.1 更新系统软件源4.2 安…

使用Dockerfile打包java项目生成镜像部署到Linux_java项目打docker镜像的dockerfile

比起容器、镜像来说&#xff0c;Dockerfile 非常普通&#xff0c;它就是一个纯文本&#xff0c;里面记录了一系列的构建指令&#xff0c;比如选择基础镜像、拷贝文件、运行脚本等等&#xff0c;每个指令都会生成一个 Layer&#xff0c;而 Docker 顺序执行这个文件里的所有步骤&…

【TCP/IP协议栈】【传输层】端口号、套接字、多路复用/分解、网络字节序

参考资料&#xff1a; 前言&#xff1a; 总结&#xff1a; 【计算机网络】套接字&#xff08;应用层和传输层之间的接口&#xff09; 套接字是一个通用的通信接口抽象不仅限于TCP/IP协议族作为应用层和传输层之间的桥梁支持多种通信方式和协议族 套接字定义 在 TCP 或者 UDP…

【五.LangChain技术与应用】【31.LangChain ReAct Agent:反应式智能代理的实现】

一、ReAct Agent是啥?为什么说它比「普通AI」聪明? 想象一下,你让ChatGPT查快递物流,它可能直接编个假单号糊弄你。但换成ReAct Agent,它会先推理(Reasoning)需要调用哪个接口,再行动(Action)查询真实数据——这就是ReAct的核心:让AI学会「动脑子」再动手。 举个真…

软件信息安全性测试流程有哪些?专业软件测评服务机构分享

在数字化时代&#xff0c;软件信息安全性测试的重要性愈发凸显。尤其是对于企业来说&#xff0c;确保软件的安全性不仅是维护用户信任的关键&#xff0c;也是满足合规要求的必要条件。 软件信息安全性测试是指通过一系列系统化的测试手段&#xff0c;评估软件应用在受到攻击时…

SparkAi系统体验

DeepSeek-R1-671B大模型满血版私有化部署高可用教程-SparkAi系统集成图文教程 一、SparkAI是什么二、功能模块介绍系统快速体验 三、系统功能模块3.1 AI全模型支持/插件系统3.2 AI智能体应用3.3 AI专业绘画3.4 AI视频生成3.5 Dall-E2/E3/E4绘画3.6 智能思维导图生成3.7 AI绘画广…

Cursor如何调试.Net Core控制台程序

1.背景 在Cursor下调试.Net Core控制台程序会出现下面的问题&#xff1a; 因为Cursor是VS Code的变种版本&#xff0c;并不被官方的调试机制支持去使用。基于这种情况&#xff0c;就产生了本文。 2.解决方法 使用三星电子的开源调试工具netcoredbg&#xff0c;就能解决这个问…