學(xué)習(xí)參考：

electron-api-demos

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

ant-design-pro ----> version ：2.3.1 由于網(wǎng)上Ant Design Pro+Electron的資料太少，我就貢獻(xiàn)一點(diǎn)經(jīng)驗(yàn) 最近需要講AntD Pro項(xiàng)目（以下簡(jiǎn)稱Adp）打包成桌面安裝使用，因?yàn)槲业捻?xiàng)目是一個(gè)企業(yè)業(yè)務(wù)計(jì)算系統(tǒng)，并不會(huì)常有需求的更新，因此打包成桌面應(yīng)用，用戶體驗(yàn)更好。

首先，Adp項(xiàng)目和Electron打包分開，就是不要把兩者的依賴和配置文件放在一個(gè)項(xiàng)目里，這是保持項(xiàng)目的純粹性，各自專注自己的事情。因此，我們就需要一個(gè)Adp項(xiàng)目，一個(gè)Electron打包腳手架。

我們就以最簡(jiǎn)單的方式做這件事情，先成功打包一個(gè)安裝包出來(lái)，再逐漸豐富和細(xì)化。

步驟：

1、我們需要把項(xiàng)目變成Electron的專用形式，需要調(diào)用umi的API修改webpack配置，使打包的target為electron-renderer，這個(gè)很重要，Adp默認(rèn)按照pro 默認(rèn)會(huì)按照 web 應(yīng)用來(lái)打包的，issues?#3346?。

找到：

設(shè)置：

?

然后，請(qǐng)到

設(shè)置

publicPath: './',

這很重要，否則回報(bào)以下錯(cuò)：

Failed to load resource: net::ERR_FILE_NOT_FOUND

?

還要設(shè)置：

history: 'hash'

如下：

?

另外，還要改造request.js文件，因?yàn)槲沂怯霉俜椒庋b的request來(lái)發(fā)送請(qǐng)求的，我們不如寫成配置吧：

config文件夾中新增如下：

?

寫入：

export const isBuildForElectron = false export const baseUrl = 'https://xxxxxxxxxxx.com'

第一個(gè)設(shè)置是否打包為electron應(yīng)用，第二個(gè)設(shè)置接口域名

?

上面的plugin.config.js也要改

?

if (isBuildForElectron) {config.target('electron-renderer');}

?

改造util/request.js

?

?

let url = apiUrlif (isBuildForElectron) {url = `${baseUrl}${apiUrl}` // 兼容 electron}

?

?

?

2、找一個(gè)Electron打包的腳手架，快速獲取：https://github.com/electron/electron-quick-start，這是一個(gè)快速開始，我們把它當(dāng)作腳手架用，一點(diǎn)問(wèn)題也沒有

?找到main.js，刪掉如下：

- mainWindow.loadFile('index.html')

增加如下：

+ mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))

?

修改BrowserWindow的配置

webPreferences: {nodeIntegration: true,webSecurity: false,allowRunningInsecureContent: true }

?

根目錄增加ant文件夾，把a(bǔ)dp 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系統(tǒng)",+ "mac": {+ "category": "your.app.category.type"+ }+ } + }

?

?執(zhí)行

npm run dist

?

PS：

1、對(duì)接1和2，使用electron-builder進(jìn)行打包，使用electron-builder可以使得Electron打包變得很簡(jiǎn)單，當(dāng)然打包方案不止eb，還有electron-packager，但是前者打包出來(lái)的包更體積小

electron-builder的安裝步驟和基本使用步驟，看----> npm-->electron-builder-->Quick Setup Guide

https://www.npmjs.com/package/electron-builder

?

2、解決Adp中的請(qǐng)求失敗問(wèn)題，或者說(shuō)跨域問(wèn)題：

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腳手架打包過(guò)程：

?

?

?

?

打包或的文件在項(xiàng)目的dist里，我們可以看到一些安裝包，這就是我們要的東西了，直接拿來(lái)安裝即可，目前是默認(rèn)安到 C:

4.就算不設(shè)置target為electron-renderer，用Electron的loadUrl這個(gè)API，一樣能讀取Adp的內(nèi)容，因?yàn)镋lectron本質(zhì)就是一個(gè)瀏覽器或者更準(zhǔn)確說(shuō)是一個(gè)可以運(yùn)行JS、HTML、CSS的環(huán)境

5.Electron的依賴不太好安裝，國(guó)內(nèi)或者香港環(huán)境不建議使用yarn和npm，建議使用 cnpm

?

?6.報(bào)以下錯(cuò)：

unable to find electron app

?請(qǐng)看：https://stackoverflow.com/questions/37489543/electron-rebuild-unable-to-find-electron-app

?

7.builder和packer兩者的對(duì)比：?https://segmentfault.com/a/1190000013924153

?

我已上傳打包工具?https://github.com/heytheww/electron-build

轉(zhuǎn)載于:https://www.cnblogs.com/ww01/p/10791844.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。