MacBook M1使用Electron打包mac桌面客戶端遇到的問題及解決方案
突然奇想想把寫好的vue項目（基于vue admin template開發(fā)）打包成客戶端看一看嘀掸，于是就用上了早就聽說過的Electron，據(jù)說VsCode都是用這個打包的。
在項目中打開命令行朱躺，輸入：
vue add electron-builder
然后它會有兩次提示炫惩，輸入y也就是yes就行李破。
然后就可以測試看看了：
npm run electron:serve
在這個過程中沒有遇到問題硫眯。
最后是打包：
npm run electron:build
這個命令是用來打包開發(fā)環(huán)境的包忘朝。
這時候遇到問題：
Exit code: ENOENT. spawn /usr/bin/python ENOENT
其實呢可以看一下項目目錄下有個dist_electron目錄恐仑，其中的mac目錄中有一個 文件泉坐，你打開以后發(fā)現(xiàn)其實就是個客戶端，我在這里遇到的問題是打開后輸入賬號密碼但是沒有跳轉(zhuǎn)到首頁裳仆。
于是我就想肯定是打包沒有完全成功的問題吧腕让，于是就去解決那個Exit code: ENOENT. spawn /usr/bin/python ENOENT的問題。經(jīng)過一番搜索歧斟，發(fā)現(xiàn)說是因為electron-builder要升級一下纯丸，升級成至少23.0.2的版本，于是我就開始升級静袖，升級的過程中呢它提示我我的node版本過低觉鼻，于是我就卸載了homebrew安裝的那個node，然后安裝了個新的版本队橙，我還試過升級這個electron-builder坠陈，發(fā)現(xiàn)升級完以后打包的時候還是用的那個舊的版本，在這里又折騰了老半天捐康。
再后來看到個帖子說是因為要用python2.7仇矾，于是使用pycharm新建項目的時候創(chuàng)建了一個新的解釋器環(huán)境python2.7，并記錄了它的路徑解总，然后打包的命令改成：
PYTHON_PATH=/Users/gary-hertel/.conda/envs/pythonProject1/bin/python npm run electron:build
這次倒是沒報錯就打包成功了贮匕，但是打開那個文件后輸入賬號密碼還是跳轉(zhuǎn)不到首頁，于是我又搜索這個問題花枫，找到一個帖子說是因為：
大部分vue 前段項目 會使用 js-cookie 這個庫 來操作瀏覽器的cookie
然而這個庫 在electron下 會無法使用 （最坑的是還沒報錯）
從而導(dǎo)致 登錄成功以后 寫cookie 讀cookie的操作 全部失敗
自然而然 登錄無法跳轉(zhuǎn)了
所以接下來就修改src/util/auth.js刻盐，這個文件的原內(nèi)容是：
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中修改一下相關(guān)信息，這樣打包好以后就是你的相關(guān)信息啦。
再最后就是打一個生產(chǎn)環(huán)境的包：
PYTHON_PATH=/Users/gary-hertel/.conda/envs/pythonProject1/bin/python npm run electron:build --prod
因為這個打包的時候名稱不能設(shè)置為中文伶丐，所以我們可以打包好以后去應(yīng)用程序中給它重命名一下悼做。
2022-11-04
