vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置方法

更新時(shí)間：2025年01月08日 10:17:05 作者：mr_cmx

文章介紹了如何使用Vue和Electron開發(fā)桌面端應(yīng)用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運(yùn)行和打包應(yīng)用等步驟,并分享了一些常見的打包錯(cuò)誤及其解決方法,感興趣的朋友一起看看吧

vue + electron 開發(fā)桌面端應(yīng)用

安裝 electron

npm i electron -D

記得加上-D，electron 需添加到devDependencies，如果添加到dependencies后面運(yùn)行可能會(huì)報(bào)錯(cuò)

根目錄創(chuàng)建electron文件夾，在electron文件夾創(chuàng)建main.js（或者background.js）

在文件中添加如下代碼：

// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow() {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 書寫渲染進(jìn)程中的配置
      nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關(guān)的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
    // 加載 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他
    // 打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?
// 任務(wù)欄上的圖標(biāo)來(lái)說(shuō)，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

修改package.json

1、在scripts同級(jí)下添加

"main": "electron/main.js",

根據(jù)實(shí)際的文件路徑配置

2、查看是否存在"type": "module"配置
如果有，則刪除"type"配置，因?yàn)閙ain中用的不是es6的模塊引入

3、"scripts"中添加"electron:dev": "electron ."，用于啟用electron

現(xiàn)在就可以通過npm run electron:dev運(yùn)行electron了

因?yàn)樯厦鎚ain.css運(yùn)行的是 dist文件夾中的 index.html ,所以如果沒有該文件的得先npm run build

多環(huán)境配置并在本地開發(fā)時(shí)使用熱更新

安裝 electron-reload

npm i electron-reload

修改”scripts“ 指令

"electron:dev": "set ELECTRON_ENV=development& electron .",

在本地運(yùn)行時(shí)添加值為 ‘development’ 的 ELECTRON_ENV 環(huán)境變量

修改main.js內(nèi)容

完整代碼如下

// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow() {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 書寫渲染進(jìn)程中的配置
      nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關(guān)的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    },
  })
  console.log("process.env.ELECTRON_ENV", process.env.ELECTRON_ENV)
  // let env = 'pro'
  let env = process.env.ELECTRON_ENV
  // 環(huán)境變量 ELECTRON_ENV 值為 development 則使用熱更新
  // 配置熱更新
  if (env == 'development') {
    const elePath = path.join(__dirname, '../node_modules/electron')
    require('electron-reload')('../', {
      electron: require(elePath),
    })
    // 熱更新監(jiān)聽窗口
    mainWindow.loadURL('http://localhost:3100')
    // 打開開發(fā)工具
    mainWindow.webContents.openDevTools()
  } else {
    // 生產(chǎn)環(huán)境中要加載文件，打包的版本
    Menu.setApplicationMenu(null)
    // 加載 index.html
    mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增
  }
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他
    // 打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?
// 任務(wù)欄上的圖標(biāo)來(lái)說(shuō)，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

這里 http://localhost:3100 為我本地開發(fā)時(shí)項(xiàng)目運(yùn)行的url

運(yùn)行
本地啟動(dòng)web項(xiàng)目
一般是：npm run dev
然后再：npm run electron:dev啟動(dòng)electron。這樣electron就可以實(shí)時(shí)監(jiān)聽窗口了。

打包應(yīng)用

安裝 electron-builder

npm i electron-builder -D

package.json中新增scripts

"electron:build": "vite build --mode application & electron-builder build --config electron-builder.json",

創(chuàng)建 electron-builder.json 進(jìn)行打包配置

{
  "appId": "com.example.myapp",
  "productName": "app名字",
  "files": ["./electron/main.js", "./dist"],
  "extraFiles": ["./videos", "./cvideo"], 
  "directories": {
    "output": "./buileder"
  },
  "nsis": {
    "oneClick": false,
    "perMachine": true,
    "allowToChangeInstallationDirectory": true
  },
  "win": {
    "icon": "public/icon.png",
    "target": ["nsis", "zip"]
  },
  "mac": {
    "icon": "public/icon.png",
    "target": "dmg"
  },
  "linux": {
    "icon": "public/icon.png",
    "target": "AppImage"
  },
  "dmg": {
    "contents": [
      {
        "x": 110,
        "y": 150
      },
      {
        "x": 240,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "appx": {
    "publisher": "CN=app名字"
  }
}

public/icon.png 為應(yīng)用的icon圖標(biāo)，沒有的話可以刪除

運(yùn)行打包命令

npm run electron:build

打包成功后，在根目錄會(huì)出現(xiàn)一個(gè)buileder文件夾，打包后的應(yīng)用就在里面

打包過程中常見的一些坑

一、打包后沒有報(bào)錯(cuò)，但打開后一片空白
打開調(diào)試工具發(fā)現(xiàn)文件引入失敗，且引入路徑也不對(duì)。這種一般是根路徑配置問題
解決方法：
1、配置base，以vite為例
在vite.config.ts中添加base配置

export default defineConfig({
  base: './',
})

2、在 index.html 中查看head中是否有這段標(biāo)簽

<base href="/" rel="external nofollow" >

注意！注意！注意！（這個(gè)bug我之前找了好一會(huì)兒才發(fā)現(xiàn)）

有的話刪除掉

二、如果報(bào)：Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies"

這個(gè)錯(cuò)誤表示package.json文件中依賴electron應(yīng)該在 devDependencies而不是dependencies中

解決方法：
將electron移到devDependencies，并重裝依賴

三、如果報(bào)類似 http://github.com/xxxx/xxxx 的錯(cuò)誤一般是網(wǎng)絡(luò)問題

解決方法：
過一會(huì)兒再嘗試，或者科學(xué)上網(wǎng)

四、如果報(bào)類似 zip: not a valid zip file github.com/develar/app-builder/pkg/archive/zipx.(*Extractor).extractAndWriteFile的錯(cuò)誤

解決方法：
重裝依賴

到此這篇關(guān)于vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置的文章就介紹到這了,更多相關(guān)vue 集成 electron 和 electron 打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: