Vite项目集成electron

澶渊
1,237 阅读3分钟

Vite项目集成electron

Electron和Vite

在已有的vite项目中使用electron，在不影响原有项目架构的情况下添加electron使用

目录结构：

├── dist              vue打包目录
├── electron          electron 目录
|   ├── index.js      
|   └── preload.js    
├── release           electron打包目录
|   ├── app           应用app
|   └── win-unpacked  解压可用app
├── src               vue项目代码    
├── index.html  
├── ...     
├── package.json      package.json

可以看到，只要在一个正常vue项目中添加electron和release目录即可。

Electron配置

安装插件

安装electron vite-electron-plugin vite-plugin-electron-renderer

npm install electron vite-electron-plugin vite-plugin-electron-renderer -D

electron配置文件

新建electron目录，新加index.js

注意：开发环境下运行，使用的是loadUrl,url地址为本地开发地址，打包后加载的是本地文件，使用loadFile。

// index.js
import path from 'path'
import { BrowserWindow, app, ipcMain } from 'electron'
// app 控制应用程序的事件生命周期。
// BrowserWindow 创建并控制浏览器窗口。

let win
// 定义全局变量获取 窗口实例

const createWindow = () => {
  win = new BrowserWindow({
    autoHideMenuBar: true,
    show: false,
    width: 1920,
    minWidth: 1240,
    height: 1080,
    minHeight: 600,
    webPreferences: {
      devTools: true,
      contextIsolation: false,
      nodeIntegration: true,
      // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
    },
  })

  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, '../dist/index.html'))
  } else {
    // VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME
    win.loadURL(`https://localhost:5173/`)
  }
  win.webContents.openDevTools()
  win.once('ready-to-show', () => {
    win.show()
  })

// 在Electron完成初始化时被触发
app.whenReady().then(createWindow)

package.json配置

package.json配置,新增main字段

{
  "name": "vue-vite-electron",
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
  },
}

vite.config.js配置

修改vite.config.js配置 引入electron对应文件及配置

// vite.config.js
import electron from 'vite-electron-plugin'
import renderer from 'vite-plugin-electron-renderer'

export default defineConfig({
  server: {
    https: true,
  },
  plugins: [
    ...,
    electron({
      include: ['electron'],
      main: {
        entry: 'electron/index.js', // 此处指向electron主进程文件
      },
    }),
    // 渲染进程可使用node.js API
    renderer({
      nodeIntegration: true,
    }),
  ]
})

现在运行 npm run dev 就可以打开一个electron应用了。

Electron打包

安装electron-builder

打包使用electron-builder插件，安装：

npm install electron-builder -D

package.json中增加打包命令及打包配置

{
  "name": "vue-vite-electron",
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    // 打包命令
    "buildapp": "vite build && electron-builder",
   },
   // 打包配置
   "build": {
      "appId": "app.desktop",
      "productName": "app",
      "asar": true,
      "copyright": "Copyright © 2022 electron",
      "directories": {
        "buildResources": "assets",
        "output": "release/"
      },
      "files": [
        "dist-electron/**/*",
        "dist/**/*"
      ],
      "win": {
        "target": [
          {
            "target": "nsis",
            "arch": [
              "x64"
            ]
          }
        ],
        "artifactName": "${productName}_${version}.${ext}"
      },
      "nsis": {
        "oneClick": false,
        "perMachine": false,
        "allowToChangeInstallationDirectory": true,
        "deleteAppDataOnUninstall": false
      }
    }
}

下面是nsis配置内容，可根据项目需要进行配置

{"oneClick": false, // 创建一键安装程序还是辅助安装程序（默认是一键安装）
    "allowElevation": true, // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 （仅作用于辅助安装程序）
    "installerIcon": "public/timg.ico",// 安装程序图标的路径
    "uninstallerIcon": "public/timg.ico",// 卸载程序图标的路径
    "installerHeader": "public/timg.ico", // 安装时头部图片路径（仅作用于辅助安装程序）
    "installerHeaderIcon": "public/timg.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
    "installerSidebar": "public/installerSiddebar.bmp", // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
    "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
    "shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称
    "include": "script/installer.nsi",  // NSIS包含定制安装程序脚本的路径，安装过程中自行调用  (可用于写入注册表 开机自启动等操作)
    "script": "script/installer.nsi",  // 用于自定义安装程序的NSIS脚本的路径
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
}

打包注意事项：

  1. directories是打包输出配置，output配置输出路径

  2. files中写明需要打包的文件

  3. windows只可打windows包，mac可以搭win和mac包，在build指令中可增加后缀指明打包版本，如"buildapp": "vite build && electron-builder -mw" m-mac w-windows

  4. 打包后运行应用，如果发现应用白屏可检查 release/win-unpacked/resources/app.asar 文件中是否包含dist静态文件或loadfile的地址是否正确，app.asar查看需要使用asar进行解压

  5. 首次打包时会下载对应的依赖包，但由于网络原因基本都下载不下来，所以需要先下载对应包放到electron中的cache目录里。目录默认是在C:\Users\Administrator\AppData\Local\electron\Cache 下，也可根据提示放置。

现在运行npm run buildapp 即可正常打包

Electron同页面通信

主进程通知渲染进程

// electron/index.js 主进程
win.webContents.send('main-window-max')


// 页面接收
import { ipcRenderer } from 'electron'

ipcRenderer.on('main-window-max', () => {
  // to do something...
})

渲染进程通知主进程

import { ipcRenderer } from 'electron'

ipcRenderer.send('window-close')


// electron/index.js 主进程 使用ipcMain接收
import { ipcMain } from 'electron'

ipcMain.on('window-close', () => {
  win.close()
})
avatar
文章
阅读
粉丝