Electron系列 -- vue專案打包成.exe檔案(透過官方demo的方式)

一万年以前發表於2024-11-26
Vue

一. 拉取官方demo (electron-quick-start)

//將electron官網中的 electron-quick-start 拉取到本地

git clone https://github.com/electron/electron-quick-start

安裝成功的目錄如下

2.安裝好後，用vscode（Sublime Tex 等工具）開啟，新建終端，輸入下面的命令。

初始化依賴

npm install
簡寫

npm i
打包所需的依賴

npm i electron --save-dev
npm i electron-packager --save-dev
npm install -g @electron/packager

npm run start 啟動專案

啟動成功顯示 Hello World!

二. 專案打包

透過將vue專案打包, 會生成一個dist檔案

三. 修改electron-quick-start 檔案

刪除 electron-quick-start 檔案中的index.html，把vue專案打包的dist檔案放進去。
開啟electron-quick-start 檔案裡的main.js檔案，附上mian.js完整程式碼
重點是： mainWindow.loadFile(“./dist/index.html”) 的修改

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
 
function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1920,    //視窗寬度
    height: 1080,    //視窗高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') 
    }
  })
 
  // and load the index.html of the app.
  mainWindow.loadFile('index.html') //專案入口檔案
  mainWindow.setMenu(null); //    隱藏頂部選單
 
  // Open the DevTools.
  // mainWindow.webContents.openDevTools() //開啟除錯工具
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

巢狀的vue專案啟動頁面( npm run start )

在 electron-quick-start 專案 package.json 配置檔案中，scripts 下新增 packager 指令 

  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ 測試xxx收銀系統 --platform=win32 --arch=x64 --icon=./dist/favicon.ico --out=./out --overwrite"
  }, // 測試xxx收銀系統 為應用名

npm run packager 執行打包命令

打包完畢, node_modules同級 會生成out檔案, 點開exe包就是打包好 , 可安裝在windows系統上

四. 至此 exe 打包已完成 , 接下來使用 Inno Setup（工具生成安裝程式包)

在Inno Setup 裡面搭建一個指令碼, 透過指令碼編輯安裝程式的名稱, 版本. 快捷鍵生成, 安裝目錄等, 是很有必要的, 生成一次後,後續可以一直沿用 ,二次使用選擇上一次建立好的指令碼, 一鍵打包即可

原文地址：https://blog.csdn.net/m0_71071209/article/details/140429945

相關文章