使用electron打包前端代碼安裝包

 

項目的構建這裏就不講了，我的項目是使用vuecli創建的，node.js也是需要的

一、npm安裝

npm install electron -g

npm install -g electron-prebuilt

npm install -g electron-packager

package.json 

{
  "name": "wisdom",
  "version": "0.1.0"
  "main": "src/index.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^7.0.0"
  }

main對應調用electron代碼放置的位置，

start是npm start 運行electron，打開窗口

"electron": "^7.0.0"是electron的版本

二、創建main文件

接下來根據main的路徑創建對應的文件，用來調用electron並實現功能

const { app, BrowserWindow, Menu, ipcMain, shell } = require('electron')
let path = require('path');
let exePath = path.dirname(app.getPath('exe'));

// 保持對window對象的全局引用，如果不這麼做的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win

function createWindow () {
  Menu.setApplicationMenu(null)
  // 創建瀏覽器窗口。
  win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true
    },
    // frame: false
  })

  // 加載index.html文件
  win.loadFile('dist/index.html')

  // 打開開發者工具
  // win.webContents.openDevTools()

  // 當 window 被關閉，這個事件會被觸發。
  win.on('closed', () => {
    // 取消引用 window 對象，如果你的應用支持多窗口的話，
    // 通常會把多個 window 對象存放在一個數組裏面，
    // 與此同時，你應該刪除相應的元素。
    win = null
  })
}

// Electron 會在初始化後並準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)

// 當全部窗口關閉時退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標並且沒有其他窗口打開時，
  // 通常在應用程序中重新創建一個窗口。
  if (win === null) {
    createWindow()
  }
})

// 在這個文件中，你可以續寫應用剩下主進程代碼。
// 也可以拆分成幾個文件，然後用 require 導入。

// 異步消息
ipcMain.on('open', () => {
  shell.openItem(exePath + '\\djj\\tsd.exe')

})

• 這裏的index指向是build後的index.html文件
• shell是命令行方法，這裏想要實現的是調用本地的文件
• \需要使用\轉譯

這裏放上electron的文檔地址https://electronjs.org/docs

接下來運行npm start就可以運行了

三、打包

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1

大概格式是這樣的：

electron-packager <應用目錄> <應用名稱> <打包平臺> --out <輸出目錄> <架構> <應用版本>

還可以添加icon

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13 --icon=./app/img/icon.ico

但是這裏會報錯，下面貼一下我的實現方法

electron-packager . wisdom --win --out ../wisdom --arch=x64 --icon=./dist/XXn.ico

之後就可以在輸出目錄中找到打好的包了。

四、生成exe安裝包

• 使用NSIS軟件：https://pan.baidu.com/s/1mitSQU0
• 安裝asar

npm install -g asar

npm之後接着輸入

asar pack ./index.html app.asar

生成asar包

之後將 .asar 移至之前打包生成的文件的resources文件夾下

打開nsis軟件

 

導入需要放在安裝包中的文件

（其他步驟按照要求填寫，這裏就不展開講了）

腳本創建成功之後點擊運行

完成之後，就可以看到你的安裝包啦！

原文地址：https://cloud.tencent.com/developer/article/1493345

 

接下來講講我遇到的問題：

• 報錯fs.existsSync is not a function

這裏需要將調用require('electron')的方法改爲window.require('electron')就可以解決

• 生成安裝包的時候報錯win32 error code 740

在運行VNISEdit 編譯環境的時候，使用管理員權限打開

• 修改代碼之後run start沒發生變化

需要先build一下，在npm start就可以看到變化了