electron+vue3初体验

一、创建项目

使用命令npm create vite@latest创建vue3项目

二、引入electron

可参考官网配置Electron

1、下载electron

使用命令 npm install electron -D
以为使用的是vite，需要下载vite-plugin-electron和vite-plugin-electron-renderer，使用命令 npm install vite-plugin-electron vite-plugin-electron-renderer -D

2、引入和配置

创建文件夹 electron，包含两个文件 index.ts(主进程)和preload.ts(渲染进程)

vite.config.ts配置相关插件，代码如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import electronRender from 'vite-plugin-electron-renderer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: [
        // 主进程
        'electorn/index.ts',
        // 预加载
        'electorn/preload.ts',
      ],
    }),
    electronRender()
  ],
  server: {
    port: 8080
  }
})

electron/index.ts文件代码如下

import { app, BrowserWindow, ipcMain, dialog, Menu } from 'electron'
import path from 'path'

let win: BrowserWindow | null

const createWindow = () => {
  win = new BrowserWindow({
    autoHideMenuBar: true,
    webPreferences: {
      devTools: true,
      contextIsolation: true,
      nodeIntegration: true,
      preload: path.join(__dirname, './preload.js')
    }
  })
  win.loadFile(path.join(__dirname, '../dist/index.html'))
  win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)

  // 打开开发者工具
  win.webContents.openDevTools()
}

const handleSetTitle = (event, title) => {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win!.setTitle(title)
}

// 监听app加载完成的事件
app.on('ready', () => {
  createWindow()  // 打开应用窗口
  // 当应用没有关闭，但是窗口长度为0时，重新打开窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
// 监听所有的窗口都关闭时，退出app
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

修改package.json ，添加启动和打包命令

"scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build && electron-builder",
    "preview": "vite preview"
},

配置打包

"build": {
    "appId": "com.electron.electron-vue",
    "productName": "electron-vue",
    "asar": true,
    "copyright": "Copyright © 2021",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "win": {
      "icon": "https://lmg.jj20.com/up/allimg/1114/050R1105319/21050Q05319-1-1200.jpg",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "Release Notes"
    }
  }

完整代码

{
  "name": "electorn-vue",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "author": "huzheng",
  "description": "electron + vue3 + vite",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vite-plugin-electron": "^0.15.3",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "electron": "23.1.3",
    "electron-builder": "^24.6.4",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vue-tsc": "^1.8.5"
  },
  "build": {
    "appId": "com.electron.electron-vue",
    "productName": "electron-vue",
    "asar": true,
    "copyright": "Copyright © 2021",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "win": {
      "icon": "https://lmg.jj20.com/up/allimg/1114/050R1105319/21050Q05319-1-1200.jpg",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "Release Notes"
    }
  }
}

具体配置详情见官网Electron。

3、运行效果

执行 npm run dev启动项目