MacBook M1使用Electron打包mac桌面客户端遇到的问题及解决方案
突然奇想想把写好的vue项目（基于vue admin template开发）打包成客户端看一看，于是就用上了早就听说过的Electron，据说VsCode都是用这个打包的。
在项目中打开命令行，输入：
vue add electron-builder
然后它会有两次提示，输入y也就是yes就行。
然后就可以测试看看了：
npm run electron:serve
在这个过程中没有遇到问题。
最后是打包：
npm run electron:build
这个命令是用来打包开发环境的包。
这时候遇到问题：
Exit code: ENOENT. spawn /usr/bin/python ENOENT
其实呢可以看一下项目目录下有个dist_electron目录，其中的mac目录中有一个 文件，你打开以后发现其实就是个客户端，我在这里遇到的问题是打开后输入账号密码但是没有跳转到首页。
于是我就想肯定是打包没有完全成功的问题吧，于是就去解决那个Exit code: ENOENT. spawn /usr/bin/python ENOENT的问题。经过一番搜索，发现说是因为electron-builder要升级一下，升级成至少23.0.2的版本，于是我就开始升级，升级的过程中呢它提示我我的node版本过低，于是我就卸载了homebrew安装的那个node，然后安装了个新的版本，我还试过升级这个electron-builder，发现升级完以后打包的时候还是用的那个旧的版本，在这里又折腾了老半天。
再后来看到个帖子说是因为要用python2.7，于是使用pycharm新建项目的时候创建了一个新的解释器环境python2.7，并记录了它的路径，然后打包的命令改成：
PYTHON_PATH=/Users/gary-hertel/.conda/envs/pythonProject1/bin/python npm run electron:build
这次倒是没报错就打包成功了，但是打开那个文件后输入账号密码还是跳转不到首页，于是我又搜索这个问题，找到一个帖子说是因为：
大部分vue 前段项目 会使用 js-cookie 这个库 来操作浏览器的cookie
然而这个库 在electron下 会无法使用 （最坑的是还没报错）
从而导致 登录成功以后 写cookie 读cookie的操作 全部失败
自然而然 登录无法跳转了
所以接下来就修改src/util/auth.js，这个文件的原内容是：
import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
修改成：
const TokenKey = 'vue_admin_template_token'
export function getToken() {
return localStorage.getItem(TokenKey)
}
export function setToken(token) {
return localStorage.setItem(TokenKey, token)
}
export function removeToken() {
// if (process.env.NODE_ENV === 'production') {
// return store.delete(TokenKey)
// }
return localStorage.removeItem(TokenKey)
}
然后我做了个测试，就是不管那个python版本的问题，还是用以下命令打包:
npm run electron:build
在项目目录下的dist_electron/mac中生成的那个文件是能运行的，但是不会生成dmg文件，所以那个python版本的问题还是跳不过。
到最后，在package.json中修改一下相关信息，这样打包好以后就是你的相关信息啦。
再最后就是打一个生产环境的包：
PYTHON_PATH=/Users/gary-hertel/.conda/envs/pythonProject1/bin/python npm run electron:build --prod
因为这个打包的时候名称不能设置为中文，所以我们可以打包好以后去应用程序中给它重命名一下。
2022-11-04
网友评论