git安裝包下載鏈接

https://npm.taobao.org/mirrors/git-for-windows/

yarn使用文檔

https://www.cnblogs.com/sunqq/p/10785445.html

解決安裝Electron緩慢問題

Electron入門應(yīng)用打包exe（windows）

npm install electron-packager -g
基本打包命令:electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

參數(shù)說明：

• sourcedir：項(xiàng)目所在路徑
• appname：應(yīng)用名稱
• platform：確定了你要構(gòu)建哪個(gè)平臺(tái)的應(yīng)用（Windows、Mac 還是 Linux）
• architecture：決定了使用 x86 還是 x64 還是兩個(gè)架構(gòu)都用
• electron version：electron 的版本
• optional options：可選選項(xiàng)

第二種方法：

1 .安裝依賴
npm install electron-builder --save-dev
npm安裝可能會(huì)很慢
yarn add electron-builder
2 .配置打包命令
在 package.json 的 scripts 中添加兩條新命令 pack 和 dist：

"scripts": {
    "start": "electron .",
    "pack":"electron-builder --dir",
    "dist":"electron-builder"
}

• pack命令不會(huì)打包，只會(huì)生成一個(gè)包文件夾壓縮包，用于測(cè)試流程。
• dist會(huì)先生成打包后的文件夾(xxx-unpacked)，再將其打包成一個(gè) Setup 安裝包。
  3 .配置 build 參數(shù)
  build 參數(shù)由 electron-builder 使用，我們的打包參數(shù)可以在此配置。
  詳細(xì)參數(shù)及適用平臺(tái)參考：https://www.electron.build/configuration/configuration

//package.json
"build":{
    "appId":"com.azimiao.test",
    "asar":true,
    "afterPack":"./build/afterPack.js",
    "directories":{
        "buildResources":"build",
        "output":"dist"
    },
    "win":{
        "target": [{
            "target":"nsis"
        }],
        "icon":"build/favicon.ico",
        "asarUnpack":[
            "src/**",
            "README.md"
        ]
    },
    "nsis":{
        "oneClick":false,
        "allowElevation":true,
        "allowToChangeInstallationDirectory":true,
        "installerIcon":"build/install_favicon.ico",
        "uninstallerIcon":"build/uninstall_favicon.ico",
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true
    }
}

簡(jiǎn)單介紹下打包參數(shù)內(nèi)的重要配置項(xiàng)：
directories.buildResources:默認(rèn)值為 build，是打包時(shí)的資源文件夾，該文件夾不會(huì)被打包至程序內(nèi)，可以放置一些打包需要用的圖標(biāo)、資源等。
directories.output：默認(rèn)值 dist，打包輸出文件夾。
afterPack：生成 Unpack 文件夾后要執(zhí)行的腳本，運(yùn)行的時(shí)機(jī)在打包之后，在生成安裝包之前。我用它來刪除 README.md 等不需要放入安裝包的文件。
win.target：默認(rèn)值 nsis，指定 win 平臺(tái)的打包類型，例如appx、msi、zip等。
win.asarUnpack：不會(huì)壓縮進(jìn) app.asar 的資源。
nsis.allowToChangeInstallationDirectory：生成的安裝包是否允許改變安裝位置。

afterPack.js

const fs = require("fs");
const path = require("path");
async function afterPack(context){
    // 刪除 README 文件，使其不加入 Setup 包中。
    let readmePath = path.join(context.appOutDir,"resources/app.asar.unpacked/README.md");
    if(fs.existsSync(readmePath)){
        fs.unlinkSync(readmePath);
    }
}
module.exports = afterPack;

參數(shù)說明：

ico在線制作

https://tool.520101.com/diannao/ico/ 或 https://www.qvdv.com/tools/qvdv-ico.html
在線制作的圖標(biāo)有問題，這里推薦一款制作軟件IconWorkshop
尺寸42*42

electron-builder打包時(shí)下載electron失敗解決方案

electron-builder 在打包時(shí)會(huì)檢測(cè)cache中是否有electron 包，如果沒有的話會(huì)從github上拉去，在國內(nèi)網(wǎng)絡(luò)環(huán)境中拉取的過程大概率會(huì)失敗，所以你可以自己去下載一個(gè)包放到cache目錄里
https://github.com/electron/electron/releases/download/v8.0.0/electron-v8.0.0-darwin-x64.zip
放一個(gè)下載地址，國內(nèi)github下載也不一定能下下來
路徑：C:\Users\用戶名\AppData\Local\electron\Cache
壓縮包放進(jìn)去之后解壓即可，打包過程中可能會(huì)需要下載別的包，還是會(huì)卡住，一樣的解決方法。

打包

electron-builder
installerIcon 安裝程序圖標(biāo)需要256*256
最好用yarn來運(yùn)行命令，用npm的話會(huì)有打包失敗的情況，或者卡頓。

打包運(yùn)行生成的exe左上角圖標(biāo)不顯示問題（在線制作的ico）

favicon.ico文件太大，控制在20~50kb

electron-vue vue-cli4 初始化項(xiàng)目失敗

electron-vue文檔
npm install -g @vue/cli-init安裝依賴用npm i（運(yùn)行打包yarn會(huì)卡在那里，自己嘗試換著用就好。）

參考鏈接

electron的zip包下載到本地npm源
直接瀏覽器打開淘寶那個(gè)鏡像源：npm.taobao.org/mirrors/ele…，把你要安裝的electron對(duì)應(yīng)的版本zip包下載到本地，放在用戶目錄下的一個(gè)名為.electron的隱藏文件夾中
打包的時(shí)候可能還是要下載github的包：https://github.com/electron/electron/releases/tag/版本號(hào)
https://github.com/electron/electron/releases/tag/v2.0.18

Vue+Electron下Vuex的Dispatch沒有效果的解決方案

mapActions按namespaced引入，無報(bào)錯(cuò)也不執(zhí)行，查了半天vuex文檔，結(jié)果是electron的問題

方法一：
在 store/index.js 里面，去掉 createSharedMutations 插件。
方法二：
https://github.com/vue-electron/vuex-electron#installation
看第 3 條
意思就是：
在/src/main/index.js加上一行代碼import '../renderer/store'(默認(rèn)路徑一般都是這個(gè))

import { app, BrowserWindow, Menu, ipcMain } from 'electron'

import '../renderer/store'//vuex action不執(zhí)行