學習參考：

electron-api-demos

我以下的方式，其實并把Ant Design Pro文件打包到生成的安裝包里，所以，安裝包=Ant Design Pro+Electron環境

ant-design-pro ----> version ：2.3.1 由于網上Ant Design Pro+Electron的資料太少，我就貢獻一點經驗 最近需要講AntD Pro項目（以下簡稱Adp）打包成桌面安裝使用，因為我的項目是一個企業業務計算系統，并不會常有需求的更新，因此打包成桌面應用，用戶體驗更好。

首先，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 = apiUrlif (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

轉載于:https://www.cnblogs.com/ww01/p/10791844.html

總結

以上是生活随笔為你收集整理的Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。