electron集成打包vue项目为桌面exe（若依前后端分离框架）

最新推荐文章于 2025-04-13 15:52:50 发布

最初@

最新推荐文章于 2025-04-13 15:52:50 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45393413/article/details/131914237

版权

该文指导如何将基于若依前后端分离框架的Vue项目，通过Electron打包成桌面应用exe。涉及步骤包括前期准备（下载项目、安装环境）、Electron环境配置（解决依赖和报错）、修改项目代码（处理登录跳转、路由模式、退出白屏问题）以及打包过程中的问题处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

electron集成打包vue项目为桌面exe（若依前后端分离框架）

一、前期准备

下载若依前后端分离框架（https://gitee.com/y_project/RuoYi-Vue.git）
下载node版本大于14
安装淘宝镜像： npm config set registry https://registry.npm.taobao.org
检查是否安装成功： cnpm -v
进入ruoyi-ui前端项目下载依赖：（npm install 或者 cnpm i）

二、下载安装electron环境

下载electron： cnpm install electron --save-dev
添加打包命令： vue add electron-builder
<1> src下出现background.js 文件

<2> package.json 文件中出现electron指令

注：可能会出现报错
1. 关于报红信息关于 yarn等，可执行：yarn add vue-cli-plugin-electron-builder -D --tilde
2. 关于报红信息关于core-js等，可执行： npm install core-js
配置electron镜像地址：
（1）npm config set registry http://registry.npm.taobao.org/

（2）npm config set electron_mirror=“https://npm.taobao.org/mirrors/electron/”

（3）npm config set electron_builder_binaries_mirror=“http://npm.taobao.org/mirrors/electron-builder-binaries/”
设置跨域问题
（1）打开env.production文件
（2）VUE_APP_BASE_API = ‘线上后端接口地址/prod-api’
执行打包命令：npm run electron:build
打包成功后会在目录下出现dist_electron文件，文件中生成了exe文件，点击安装即可

三、存在的一些问题

登录成功页面不跳转的问题

(1) 将项目中的Cookies.get全部替换为localStorage.getItem
(2) 将项目中的Cookies.set全部替换为localStorage.setItem
(3) 将项目中的Cookies.remove全部替换为localStorage.removeItem

将路由模式history 改为hash

找到路径 src/router/index页面的 将history修改成 hash
    export default new Router({
      mode: 'hash', // 去掉url中的#
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })

退出登录页面白屏问题

找到退出登录页面 src/layout/components/Navbar文件
 this.$store.dispatch('LogOut').then(() => {
     // location.href = '/index';    
          换成 
        this.$router.push('/login') 
    })