这里我的vue3+vite项目已经有了,在这基础上使用electron转换成桌面应用。

1、获取electron配置文件

首先可以执行以下命令,从electron的官网下载案例,下载会比较慢,可以直接访问git仓库,下载代码。

git clone https://github.com/electron/electron-quick-start
  1. 下载以后主要是要用到代码里的main.js和preload.js两个文件。如果不下载,直接复制下面的两个文件代码即可。

在这里插入图片描述

  1. main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // 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.

  1. preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

  1. 把以上两个文件放到自己的vue项目文件目录下

在根目录下新建了一个electron文件夹,里面放两个js文件
在这里插入图片描述

2、项目配置

  • 安装依赖

electron不多说。concurrently和 wait-on解释一下。
开发环境的运行条件是,先运行vite启动服务,然后electron去加载本地服务url。这里需要安装两个依赖。

concurrently:阻塞运行多个命令,-k参数用来清除其它已经存在或者挂掉的进程
-wait-on:等待资源,此处用来等待url可访问

npm install electron --save-dev
npm install concurrently wait-on --save-dev
  1. electron/main.js

根据需求,我添加了Menu.setApplicationMenu(null)隐藏菜单栏,frame是否展示顶部导航的配置,默认为true。mainWindow.loadFile(‘index.html’)修改成了mainWindow.loadURL(关键),具体配置如下。

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')

//这里的配置手动写的,也可以使用cross-env插件配置
const mode = 'development'

/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

function createWindow() {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: true /*是否展示顶部导航  去掉关闭按钮  最大化最小化按钮*/ ,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    })

    // and load the index.html of the app.
    // mainWindow.loadFile('index.html')  修改成如下

    mainWindow.loadURL(mode === 'development' ? 'http://localhost:2103' : `file://${path.join(__dirname, '../dist/index.html')}`)

    // Open the DevTools.
    if (mode === 'development') {
        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.
  1. vite.config.js

配置base: ‘./’
在这里插入图片描述

  1. package.json

main:main.js修改成main:electron/main.js。添加electron和electron:serve指令

    "main": "electron/main.js",
    "scripts": {
        "dev": "vite --host",
        "serve": "vite preview",
        "build": "vite build",
        "electron": "wait-on tcp:2103 && electron . --mode=development ",
        "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
    },
  1. 运行项目
npm run electron:serve

如果运行不成功或者成功之后白屏,可查看以下几个关键配置

端口一致
在这里插入图片描述
在这里插入图片描述

3、打包生成桌面应用

  1. 安装打包插件 electron-builder
npm install electron-builder --save-dev
  1. package.json添加electron:build命令,和build配置
    "main": "electron/main.js",
    "scripts": {
        "dev": "vite --host",
        "serve": "vite preview",
        "build": "vite build",
        "electron": "wait-on tcp:2103 && electron . --mode=development ",
        "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
        "electron:build": "npm run build && electron-builder"
    },
     "build": {
        "appId": "8a06282fb08c48eeacb15bfbe4d3a35b",
        "productName": "ElectronApp",
        "copyright": "Copyright © 2022 <项目名称>",
        "mac": {
            "category": "public.app-category.utilities"
        },
        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true
        },
        "files": [
            "dist/**/*",
            "electron/**/*"
        ],
        "directories": {
            "buildResources": "assets",
            "output": "dist_electron"
        }
    }
  1. 注意electron/main.js里的配置

在这里插入图片描述

  1. 执行打包命令
npm run electron:build

出现报错Error: Cannot find module ‘fs/promises’
在这里插入图片描述
搜索了下是node版本太低,目前是12.22.7,换成16.15.0再次打包成功。

成功后当前项目下出现dist_electron文件夹,即为桌面应用安装包。

提示:多次打包如果报错,可删除dist_electron文件夹,再进行打包。

参考:
Vite+Electron快速构建一个VUE3桌面应用

Logo

前往低代码交流专区

更多推荐