首先，Adp項目和Electron打包分開，就是不要把兩者的依賴和配置文件放在一個項目里，這是保持項目的純粹性，各自專注自己的事情。因此，我們就需要一個Adp項目，一個Electron打包腳手架。
我們就以最簡單的方式做這件事情，先成功打包一個安裝包出來，再逐漸豐富和細化。
步驟：
1、我們需要把項目變成Electron的專用形式，需要調用umi的API修改webpack配置，使打包的target為electron-renderer，這個很重要，Adp默認按照pro 默認會按照 web 應用來打包的，issues #3346 。
找到：
設置：
然后，請到
設置
publicPath: './',
這很重要，否則回報以下錯：
Failed to load resource: net::ERR_FILE_NOT_FOUND
還要設置：
history: 'hash'
如下：
另外，還要改造request.js文件，因為我是用官方封裝的request來發送請求的，我們不如寫成配置吧：
config文件夾中新增如下：
寫入：
export const isBuildForElectron = false export const baseUrl = 'https://xxxxxxxxxxx.com'
第一個設置是否打包為electron應用，第二個設置接口域名
上面的plugin.config.js也要改
if (isBuildForElectron) { config.target('electron-renderer'); }
改造util/request.js
let url = apiUrl if (isBuildForElectron) { url = `${baseUrl}${apiUrl}` // 兼容 electron }
2、找一個Electron打包的腳手架，快速獲取：https://github.com/electron/electron-quick-start，這是一個快速開始，我們把它當作腳手架用，一點問題也沒有
找到main.js，刪掉如下：
- mainWindow.loadFile('index.html')
增加如下：
+ mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))
修改BrowserWindow的配置
webPreferences: { nodeIntegration: true, webSecurity: false, allowRunningInsecureContent: true }
根目錄增加ant文件夾，把adp build后的文件放入ant文件夾
修改package.json，在package.json中增加build和修改script
{ "name": "xxx", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", + "pack": "electron-builder --dir", + "dist": "electron-builder" }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "^5.0.0" }, + "build": { + "appId": "xxx", + "productName": "xxxx系統", + "mac": { + "category": "your.app.category.type" + } + } + }
執行
npm run dist
PS：
1、對接1和2，使用electron-builder進行打包，使用electron-builder可以使得Electron打包變得很簡單，當然打包方案不止eb，還有electron-packager，但是前者打包出來的包更體積小
electron-builder的安裝步驟和基本使用步驟，看----> npm-->electron-builder-->Quick Setup Guide
https://www.npmjs.com/package/electron-builder
2、解決Adp中的請求失敗問題，或者說跨域問題：
https://segmentfault.com/a/1190000012030202
Electron腳手架的package.json
{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-builder --dir", "dist": "electron-builder" }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "^5.0.0" }, "build": { "appId": "your.id", "mac": { "category": "your.app.category.type" } } }
3.Electron腳手架打包過程：
打包或的文件在項目的dist里，我們可以看到一些安裝包，這就是我們要的東西了，直接拿來安裝即可，目前是默認安到 C:
4.就算不設置target為electron-renderer，用Electron的loadUrl這個API，一樣能讀取Adp的內容，因為Electron本質就是一個瀏覽器或者更准確說是一個可以運行JS、HTML、CSS的環境
5.Electron的依賴不太好安裝，國內或者香港環境不建議使用yarn和npm，建議使用 cnpm
6.報以下錯：
unable to find electron app
請看：https://stackoverflow.com/questions/37489543/electron-rebuild-unable-to-find-electron-app
7.builder和packer兩者的對比： https://segmentfault.com/a/1190000013924153
我已上傳打包工具 https://github.com/heytheww/electron-build
20190806更新：
1.electron-builder的target，設置為nisi時，可以默認帶卸載程序，並且可以支持配置安裝路徑
2.使用pkg.json配置electron-builder很快會失效，我看了一下，官方推薦使用 js配置文件
20190823更新
補坑：
1.如果遇到執行 npm run dist時，一直在下載 electron-v5.0.10-win32-ia32 或者 electron-v5.0.10-win32-x64之類的，就去這里找包https://npm.taobao.org/mirrors/electron，手動下載，放到下圖圖示位置，有一點很草泥馬的就是，淘寶鏡像的命名是v5.0.1一定要改為v5.0.10，否則electron-builder就會認為沒下載。。。轉而去下載
官方解決指南：
https://electronjs.org/docs/tutorial/installation
2.一直在下載winCodeSign-2.5.0，其實這個是electron-builder的依賴包，也是手動去github下，然后放到圖示位置，注意啊，這個要壓縮包一個解壓的也要一個，都要放出來
同樣的問題還有
凡是下載這種的
一律去github找release，然后復制地址用迅雷加速下載
最后說一點，以上的踩坑，谷歌一下，每個人都有自己的辦法，好像都能解決問題，也是服了！