electron开发桌面程序mac/window，配合vue3+vite进行配置开发

electron开发文档：https://www.electronjs.org/zh/docs/latest
vue3开发文档：https://cn.vuejs.org/guide/introduction.html

先按照文档创建一个vue3项目，按照实际需要进行相关配置，官网有介绍。

npm init vue@latest

然后在原基础上安装electron相关依赖，我用pnpm命令，大家可用npm，yarn，cnpm都可以添加

pnpm add -D concurrently cross-env electron electron-builder electron-packager wait-on

在根目录创建一个文件夹electron，里面放electron.js和preload.js
代码如下：
electron.js

// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

const isDev = process.env.IS_DEV == 'true' ? true : false;

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

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(isDev
    ? 'http://localhost:9999'
    : `file://${path.join(__dirname, '../dist/index.html')}`);
  // Open the DevTools.
  if (isDev) {
    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', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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 dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

修改vite.config.js文件
里面的配置的base配置

export default defineConfig({
  base: process.env.ELECTRON == 'true' ? './' : '',
  ..............
  })
  

修改package.json文件

添加build节点

"build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2022 ${author}",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    },
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    }
  },

修改scripts节点

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "electron .",
    "packager": "electron-packager ./dist/ --platform=win32 --arch=x64 --overwrite",
    "electron": "wait-on tcp:9999 && cross-env IS_DEV=true electron .",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none npm run dev\" \"npm run electron\"",
    "electron:build.win": "npm run build && electron-builder --win --dir",
    "electron:build.linux": "npm run build && electron-builder --linux appImage",
    "electron:build.test": "npm run build && electron-builder --dir",
    "electron:build.exe": "npm run build && electron-builder --win",
    "electron:build.mac": "npm run build && electron-builder --macos",
    "dist": "http-server ./dist --p 3333",
    "clean": "rimraf ./dist/*",
    "builder": "npm run build && electron-builder"
  },

添加main节点

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

如果还使用其他包根据实际项目进行增加，就不一一说明

package.json里面的scripts命令比较清新就不一一说明，自行运行一下命令即可，有运行命令也有打包命令，mac系统打包是app文件，win是exe文件.

是可以使用vue的语法进行配合开发的，正常的应用是可以写的，深入的话要多多学习才能了解和使用。
然后博主也写了个demo仅供学习，看下方图片：

文章参考地址
如有什么可留言，看到会回复哦。