閑來(lái)無(wú)事，想弄個(gè)Electron demo玩玩匙握，但是官網(wǎng)和網(wǎng)上寫的方法很多都跑不通咆槽，研究了半下午后在此記錄一下。
注：僅僅是配置到能跑通的環(huán)境
首先要有node環(huán)境
準(zhǔn)備工作
npm安裝Electron巨慢圈纺，而且很大的幾率出現(xiàn)超時(shí)等問(wèn)題秦忿，所以這里推薦使用cnpm全局安裝Electron
//安裝cnpm （如果已安裝cnpm可以跳過(guò)這一步）
npm install -g cnpm --registry=https://registry.npm.taobao.org
//全局安裝Electron
cnpm install -g electron
注意：在Linux開(kāi)發(fā)環(huán)境下執(zhí)行Electron安裝命令可能需要考慮一下權(quán)限問(wèn)題（看到有的大佬提到了這一點(diǎn)，然而我在windows中并沒(méi)有遇到什么權(quán)限問(wèn)題）
全局安裝打包工具蛾娶，如果不需要打包成EXE可以忽略這一步（應(yīng)該沒(méi)人會(huì)不想打包吧）
cnpm install electron-packager -g
最快速的方法
通過(guò)官方github的demo可以獲得一個(gè)Electron的腳手架灯谣，可以省去手動(dòng)編寫main.js和package.json的麻煩
//下載源代碼到本地
git clone https://github.com/electron/electron-quick-start
//跳轉(zhuǎn)到項(xiàng)目目錄
cd electron-quick-start
//安裝依賴
npm install
之后刪除掉demo項(xiàng)目中的index.html，將自己的項(xiàng)目拷貝進(jìn)來(lái)（一般來(lái)說(shuō)都是vue項(xiàng)目吧）
如果你的項(xiàng)目首頁(yè)不是index.html蛔琅，需要在main.js修改入口文件
mainWindow.loadFile('index.html') //將index.html改為你的首頁(yè)文件
之后輸入以下命令胎许，就可以運(yùn)行本地項(xiàng)目了
electron .
打包EXE
打包exe命令
electron-packager .
如果vue項(xiàng)目打包后不能正確加載js和css的話還需要將項(xiàng)目的資源路徑改為相對(duì)路徑，修改后需要重新build
vue項(xiàng)目在腳手架 /config/index.js 中，將build下的assetsPublicPath 改為 ./
uniapp項(xiàng)目的話就是/manifest.json->h5配置->運(yùn)行的基礎(chǔ)路徑改為 ./
結(jié)語(yǔ)：目前來(lái)說(shuō)已經(jīng)達(dá)到可以跑起來(lái)的地步了辜窑，剩下的接著學(xué)習(xí)吧O(∩_∩)O
