Vue项目利用Electron打包成为桌面应用

一、前期准备

下载若依前后端分离框架（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环境

1. 安装cnpm npm install -g cnpm --registry=https://registry.npmmirror.com
2. 下载electron： cnpm install electron --save-dev
3. 添加打包命令： vue add electron-builder 若无法执行-》npm install -g @vue/cli 或 新建vue项目中没有rooter文件 npm install vue-router --save
4. 检查src目录下出现background.js 文件
5. 检查package.json 文件中出现electron指令
6. 关于报红信息关于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/”

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

三、存在问题解决

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

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

2. 将路由模式history 改为hash

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

**3. 退出登录页面白屏问题

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

4.打包后的exe刷新快捷键**
ctr + r 刷新

5.打包后的exe打开控制台的快捷键
ctr + shift + i 打开控制台

如发现打包过程中出现一些报错信息，可能是安装electron失败问题，可多次尝试cnpm install electron --save-dev和vue add electron-builder命令

参考文档网址：
https://blog.csdn.net/weixin_45393413/article/details/131914237?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_utm_term~default-0-131914237-blog-128657543.235^v38pc_relevant_default_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=3