進行electron開發要經常參考github上的優秀代碼，亦或者需要使用npm、cnpm、yarn這些包管理工具來管理項目，在開發過程中會有很多坑需要填，這篇博客就綜合記錄下這些知識點

1、github速度慢的解決方法

首先，在www.ipaddress.com中查看github.com以及github.global.ssl.fastly.net映射地址。
然后，在hosts中進行對應的配置，這里根據當前的映射地址進行配置，需要注意的是這個映射地址經常都在變，當發現速度變慢后，建議再次更新地址。
最后，執行ipconfig/flushdns刷新dns，如果不行的話，就重啟。

140.82.114.4 github.com 199.232.69.194 github.global.ssl.fastly.net

配置后，使用ping github.com后應該能明顯看到速度變快

2、npm、cnpm以及yarn包管理工具的配置

這里就不介紹怎么安裝了，需要說明的是由于國內網絡問題，npm下載速度很慢可以通過配置淘寶鏡像來管理包工具，cnpm以及yarn都是可以配置成淘寶鏡像的，以下以cnpm為例來說明，yarn也是一樣的配置。

cnpm config set registry https://registry.npm.taobao.org cnpm config set disturl https://npm.taobao.org/dist

3、electron 開發遇到的坑

在electron桌面開發中遇到很多坑，這里一一總結下

坑1： electron桌面無法使用react-devtools
在具體package.json中使用electron-devtools-installer來管理devtools，但是當配置electron為9.xx版本后，無法正常的顯示react-devtools，這個對于使用reactjs來進行桌面應用開發是相當痛苦的，經過各種嘗試，發現以下配置是能夠正常加載出react-devtools的

"electron-devtools-installer": "^2.2.4"， "electron": "^8.0.1", "react-dom": "^16.3.1", "react": "^16.3.1",

坑2：ajax網絡訪問提示NET::ERR_CERT_AUTHORITY_INVALID
這種情況實際上表示當前訪問的網絡是不安全，沒有對應的證書，客戶端解決的辦法可以參考electron私有部署webview加載不安全的https網址，我通過添加如下代碼解決問題

app.commandLine.appendSwitch('--ignore-certificate-errors', 'true')

坑3：yarn install時候 一直提示electron waiting
這個可以參考安裝Electron的時候,卡住問題 ，我是用的yarn來管理package，所以實在.yarnrc文件中進行對應的配置

electron_mirror="https://npm.taobao.org/mirrors/electron/"（填上這句話即可）

坑4：ffi-napi在typescript中使用提示No native build was found
這個坑太大了，我是基于github上的tagspaces項目來修改的，由于項目需要調用c/c++的dll所以考慮采用ffi-napi來調用dll(ffi已經out了)，但是在編譯過程中一直都報以下錯誤

renderer.dev.js:113102 Uncaught Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=76 uv=1 libc=glibcat Function.module.exports../node_modules/node-gyp-build/index.js.load.path (renderer.dev.js:113102)at load (renderer.dev.js:113067)at Object../node_modules/ref-napi/lib/ref.js (renderer.dev.js:184979)at __webpack_require__ (renderer.dev.js:771)at fn (renderer.dev.js:131)at Object../node_modules/ffi-napi/lib/ffi.js (renderer.dev.js:89883)at __webpack_require__ (renderer.dev.js:771)at fn (renderer.dev.js:131)at Module.<anonymous> (renderer.dev.js:26630)at Module../app/services/webdav-io.ts (renderer.dev.js:27293)

一開始以為是node版本問題，后面發現electron項目中國electron版本不一樣對應的node版本會自動調整，所以不是本地node版本問題。花了幾天時間來解決這個問題，最后在一邊文章中看到希望，No native build was found in electron #725 ，這篇文章最后有提到
electron-leveldown-pouchdb-webpack，這里提到通過webpack.config.js中添加下插件

const webpack = require("webpack"); {...plugins: [new webpack.ExternalsPlugin("commonjs", ["leveldown"])] }

由于報錯的的是ffi-napi模塊，所以進行對應的修改

const webpack = require("webpack"); {...plugins: [new webpack.ExternalsPlugin("commonjs", ["ffi-napi"])] }

再次編譯問題解決

坑5、ChunkLoadError: Loading chunk 11 failed問題
在生產環境中報如下錯誤

react-dom.production.min.js:209 ChunkLoadError: Loading chunk 11 failed. (error: file:///D:/code/safebox/app/dist/11.renderer.prod.js)at Function.o.e (file:///D:/my/safebox/resources/app/dist/renderer.prod.js:1:723)

這個在webpack的生產環境配置中output.publicPath位置沒找對引起的，我這邊是需要根據安裝路徑來動態決定，所以在entry對應的啟動頁中添加如下代碼

__webpack_public_path__ = path

這里的path對應你的動態路徑，問題完美解決

總結

以上是生活随笔為你收集整理的windows环境下electron开发遇到的各种坑汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

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