electron官網(中文)

情況介紹

使用Vue進行項目開發，希望將Vue項目打包成桌面應用（包括mac和windows兩個平臺）
我這里介紹一下在已有Vue項目情況下，添加關于electron的打包步驟以及過程中常見的問題
使用的依賴版本：

    "electron": "^7.1.7",
    "electron-builder": "^21.2.0"

實現步驟

先確保電腦里已有node環境，使用node -v查看，如出現版本則代表已有環境，我項目上用的是12.x版本以上，如沒有請移步node下載官網下載安裝

1.首先需要在根目錄下安裝electron：npm install --save-dev electron
2. 新建主進程main.js文件，記得修改loadFile路徑為項目里build出的靜態資源包地址，如下：

const { app, BrowserWindow } = require('electron')
let mainWindow
let windowConfig = { // 窗口配置程序運行窗口的大小
  width: 1000,
  height: 800,
}
function createWindow () {
  mainWindow = new BrowserWindow(windowConfig)
  mainWindow.show()
  mainWindow.loadFile('www/index.html') // 項目里build出的靜態資源包地址為www，
  mainWindow.webContents.openDevTools() // electron窗口打開調試工具
  mainWindow.on('closed', function () {
    mainWindow = null
  })
  mainWindow.on('resize', () => {
    mainWindow.reload()
  })
}

app.on('ready', () => {
  createWindow()
  const { Menu } = require('electron')
  Menu.setApplicationMenu(null) // window下 隱藏菜單欄
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
  console.log(this, 'main')
})

3.打包

• 使用 electron-packager 方式
  (1) 添加依賴
  npm install electron-packager --save-dev 或者 yarn add electron-packager --save-dev
  如沒有添加yarn環境可：npm install -g yarn
  (2) 在 package.json文件中構建打包命令

    "packager": "electron-packager . release --platform=darwin --arch=x64 --icon=build/icon.png --out=./dist --asar --app-version=1.0.0  --overwrite --ignore=\"(release|dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\""

這里我指定的平臺和系統架構是適用mac上，可以自定義指定，模板如下：

    "package": "electron-packager . '應用名稱' --platform=‘平臺’ --arch=‘系統架構’ --icon=‘應用圖片’ --out=‘輸出目錄’ --asar --app-version=‘版本’ --ignore=‘忽略文件’",

個人使用electron-packager 可以打成執行應用程序，但是命令行冗長，且不如electron-builder支持可配置，包括平臺打包配置、nsis配置等等，所以最后項目上還是決定使用electron-builder

• 使用 electron-builder 方式(建議分平臺打包)
  (1) 添加依賴
  npm install electron-builder --save-dev 或者 yarn add electron-builder --save-dev
  如沒有添加yarn環境可：npm install -g yarn
  (2) 修改 package.json文件
  build參數配置：

"name": "XXX",
"version": "1.0.0",
"build": {
    "appId": "com.electron.app",
    "copyright": "Copyright ***",
    "productName": "Electron",
    "files": [
      "!dist/**/*"
    ],
    "mac": {
      "icon": "build/icon.png", // 應用程序圖標
      "category": "public.app-category.productivity",
      "artifactName": "${productName}_${version}.${ext}", // 應用程序包名
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon": "build/icon.png",
      "artifactName": "${productName}_${version}.${ext}",
      "verifyUpdateCodeSignature": false,
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "nsis": { 
      "oneClick": false, // 是否一鍵安裝
      "createDesktopShortcut": "always", // 是否添加桌面快捷方式
      "allowToChangeInstallationDirectory": true,// 允許修改安裝目錄
    },
    "extends": null
  }

ps:build中可以適當增加nsis配置，可以優化用戶體驗，比如是否允許用戶一鍵安裝、自定義安裝位置、是否添加桌面快捷方式、安裝完成是否立即啟動、配置安裝圖標等等。更多詳細參數配置可參見官方文檔 nsis配置。

scripts中構建命令：

    "electron": "electron .",  // 啟動electron 窗口
    "dist": "npm run build && electron-builder", // 使用electron-builder進行打包，先生成靜態資源包再進行electron打包

執行npm run dist進行打包(其中npm run build是項目靜態資源包生成的命令)，生成dmg或者exe執行文件，以下是我在mac上打的包：

image.png

注意：此時electron-builder后面沒有指定平臺和系統，打包的時候會參考當前操作系統的架構和平臺進行打包，也就是說，electron-builder如果在不同的操作系統上運行結果也是不一樣的,在mac上打出dmg,windows下生成exe,需要指定平臺和系統架構的話可以參考：

格式：electron-builder --platform --arch
platform是配置打包成什么平臺的安裝文件:
win系統： win32
mac系統：darwin
Linux系統：linux
arch是指定系統是什么架構的，常見的例如32位和64位操作系統：
ia32，32位操作系統，也可以在64位操作系統中安裝
x64， 64位操作系統，使用本架構打包無法再32位操作系統中安裝

還有需要注意的一點是：mac上不簽名也可以打包成功，安裝的時候還要更改電腦權限，但是涉及到自動更新、發布到 app store等功能則不能用。所以說MAC包一定要添加代碼簽名,參考地址：code-signing

常見的問題

1.添加electron相關依賴報錯
（1）設置淘寶鏡像源：npm config set registry=http://registry.npm.taobao.org/
（2）設置環境變量并安裝
Mac系統：
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install
Windows系統：
set "ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron" && npm install
注意：在問題解決完之后記得將鏡像恢復一下，避免其他的錯誤：
npm config set registry https://registry.npmjs.org/
或者切換一下 4G熱點，我就是在下載依賴的時候一路爬坑，最后還是在4G熱點的情況下成功添加依賴的

2.electron-build的時候下載electron報錯
第一次執行打包指令的時候, 會非常非常的慢, 甚至可能會失敗, 通常的原因是下載速度太慢，下載到最后就已經是0kB/s了

image.png

剛開始在windows系統下electron-build的時候我遇到electron-v7.1.7-win32-ia32.zip 這個包一直下載不下來，由于electron-builder 在打包時會檢測cache中是否有electron 包，如果沒有的話會從github上拉去，在國內網絡環境中拉取的過程大概率會失敗，所以可以通過離線下載的方式將提示的包下下來然后放到對應的目錄里面就可以,另外不僅要下載這個壓縮包，還要把對應的SHASUMS256.txt-文件也下載下來放進去,不然也會打包報錯，下載地址和壓縮包地址一致。
報錯提示里面的github地址下載不了的話移步這個地址下載：淘寶鏡像下載地址
目錄地址：
MacOS: /Users/xxx/Library/Caches/electron/
Windows: C:\Users\xxx\AppData\Local\electron\Cache

壓縮包.png

txt.png