桌面Web Electron

 

electron 整合 vue

1、搭建vue + webpack 項目

2、在同一個目錄下搭建 electron 項目

（1）安裝electron，npm install --save-dev electron

（2）配置electron主進程入口 和 啓動命令

package.json

{
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

（3）main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
    win.loadFile('./dist/index.html')  // 打開vue項目的構建產物

}
app.whenReady().then(createWindow)

（4）使用api

  const { app, BrowserWindow }  = require('electron').remote;  // 獲取electron API
  console.log(app.getVersion())

  const fs = require('fs')    // 獲取Nodejs API
  const root = fs.readdirSync('/')
  console.log(root)

  console.log(window.location.href);  // 獲取Window API

3、構建運行，npm run build;npm run start

Electron 整合 Vue 注意事項

1、在vue組件中 require('electron') 會導致webpack編譯不通過，因爲API依賴了NodeJS環境的內置模塊

解決方案：

<!-- 在html中把API放到全局，再在組件中使用 -->
<script>
    window.electron = require('electron');
</script>

Electron 打包發佈 之 手動打包

1、在github下載Electron 的 prebuilt binaries，即Electron Release 裏的 electron-**.zip，要對應合適的運行平臺，例如 electron-v6.1.11-win32-x64.zip

備註：網速不好要科學上網，選對地域

2、解壓 prebuilt binaries

3、把web項目放到 resources\app 目錄下，包括 node_modules 中的一些 nodejs 依賴

4、運行 electron.exe

Electron 打包發佈 之 electron-packager

// 安裝electron-packager
npm install electron-packager -g
npm install electron-packager --save-dev

// 設置electron資源鏡像
set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
// 首次打包
electron-packager . appname –platform=win32 –arch=x64
// 後續打包
手動將改動的web文件放到 jpf-win32-x64\resources\app 下，新增的依賴放到 jpf-win32-x64\resources\app\node_modules 下

其他技術

node-webkit(NW.js)