electron打包vue2及问题记录

一、相关node环境

vue2项目为node--- v14.21.3

electron版本 需对应为-----13.6.9

二、electron打包vue项目的两种方法

1、使用electron-quick-start快速打包

2、在本地项目中下载electron并设置相关配置打包（vue-cli-plugin-electron-builder）

三、打包过程的坑

1、下载electron很慢

1️⃣设置淘宝镜像下载：

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

2️⃣或者提前下载好electron包 ，将包放在：

 MacOS系统: ~/Library/Caches/electron/

        

Windows系统: $LOCALAPPDATA/electron/Cache或~/AppData/Local/electron/Cache/

Windows系统: $LOCALAPPDATA/electron-builder/Cache或~/AppData/Local/electron-builder/Cache/

2、cookie丢失

问题：electron打包后，保存在cookie中的值丢失，主要是token，会影响登录功能。

解决方案：改成sessionStorage存储相关信息

3、electron-builder打包mac报错：Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT

解决方案：

第一步：查看python环境是否为2.7

第二步：重新下载python2.7 

第三部：找到安装python位置

which python

第四部：配置.zshrc文件（完成后未生效可重启电脑）

sudo vim ~/.zshrc
export PYTHON_PATH=上一步获得的地址
source ~/.zshrc

4、打包后的app打开空白屏

使用yarn electron:serve 测试是正常展示的

解决方案：修改路由方式为hash模式

vue-router4.0以下的

const router = createRouter({
  mode: process.env.IS_ELECTRON ? 'hash':'history',
  ...
});

vue-router4.X的代码

const router = createRouter({
  history: process.env.IS_ELECTRON ? createWebHashHistory(process.env.BASE_URL) : createWebHistory(process.env.BASE_URL),
  ...
});