electron官網(wǎng)
electron GitHub

步驟一. 從官網(wǎng)上clone一個(gè)例子

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
項(xiàng)目跑起來之后，就會(huì)出現(xiàn)electron的桌面頁面，大概看一下入口文件main.js 和package.json

//main.js
 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),   //index.html即是入口html文件。
    protocol: 'file:',
    slashes: true
  }))

//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",   //設(shè)置入口文件main.js
  "scripts": {
    "start": "electron ."
  }
  ...
  }

步驟二. 使用 vue-cli 新建一個(gè)項(xiàng)目，并安裝相關(guān)依賴

vue init webpack test-electron
cd test-electron
npm install
npm install electron --save-dev
npm install electron-packager --save-dev
其中electron-packager是打成exe文件的插件。

將步驟一中的main.js拷貝到新建項(xiàng)目的build目錄下，并更名為electron.js。

拷貝main.js.png

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html'),
    protocol: 'file:',
    slashes: true
  }))

更改config/index.js中生產(chǎn)模式下（build）的assetsPublicPth, 原本為 /, 改為 ./ 。

 build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',         //改這里
    ....
}

更改assetsPublicPath.png

步驟三：在新建項(xiàng)目package.json文件中增加一條指令

// test-electron/package.json
"scripts": {
   ...
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js"   //增加這條,JSON文件不支持注釋，引用時(shí)請清除
  },

執(zhí)行npm run build 生成dist目錄
執(zhí)行npm run electron_dev 啟動(dòng)electron
即可看到生成的應(yīng)用程序

應(yīng)用程序.png

步驟四：打包exe文件

(1).復(fù)制build目錄下的electron.js到dist目錄中，并注意修改路徑

//electron.js
mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),   //dist下的electron.js和index.html是同級(jí)
    protocol: 'file:',
    slashes: true
  }))

(2).復(fù)制官網(wǎng)上clone的例子中的package.json到dist目錄中,注意修改路徑

//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",    //
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "~1.7.10"     //官網(wǎng)上clone下來的版本是1.7.8，這里因?yàn)槲野惭b的electron是1.7.10，所以改成了1.7.10
  }
}

dist目錄.png

（3）在項(xiàng)目的package.json中（注意不是dist下的package.json）為之前下載好的electron-packager，增加一條啟動(dòng)命令。

"scripts": {
   ...
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite"   //增加這條
  },

electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

• sourcedir: 資源(dist/package.json)路徑，在本例中既是./dist/
• appname:打包出的exe名稱,這里取名為helloworld
• platform :平臺(tái)名稱（windows是win32）
• arch: 版本，本例為x64

后邊的配置項(xiàng)都是選填，默認(rèn)是沒有這些的，這里只選填了exe的圖標(biāo)。
（注意：不可通過重命名的方式將一個(gè)png或jpg格式的文件改為ico格式，會(huì)導(dǎo)致無法build成功）

(4) 生成exe
執(zhí)行npm run electron_build，可以看到項(xiàng)目目錄中多了一個(gè)helloworld-win32-x64文件，找到里面的helloworld.exe運(yùn)行即可。

生成exe.png

生成exe.png

（5）修改.exe圖標(biāo)
下載安裝Resource Hacker，在.exe文件上鼠標(biāo)右鍵，更換圖標(biāo)后保存即可。

鼠標(biāo)右鍵.png

changeIcon.png