vite+vue3+ts项目集成electron

• 创建vite+vue3+ts项目

创建项目可参考：vue3+ts项目构建

• 安装electron相关依赖

npm install -D electron electron-builder electron-devtools-installer vite-plugin-electron vite-plugin-electron-renderer rimraf

• 新建electron-main/index.ts文件

import { app, BrowserWindow } from "electron";
import * as path from "path";

// 本地启动的vue项目路径
const localAddress = "http://localhost:5173";
// 创建一个新的窗口
const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
    },
  });
  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, "../dist/index.html"));
  } else {
    win.loadURL(localAddress);
  }
};
// 打开窗口
app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
// 关闭窗口
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

• 修改vite.config.ts

import electron from "vite-plugin-electron";
import electronRenderer from "vite-plugin-electron-renderer";
...
   plugins: [
      ...,
      electron({
        entry: "electron-main/index.ts", // 主进程文件
      }),
      electronRenderer(),
    ],
    build: {
      emptyOutDir: false,
    },

• 修改tsconfig.json

 "include": [..., "electron-main/**/*.ts"]

• 修改package.json

 "scripts": {
    ...,
    "dev": "vite --mode development",
    "build": "rimraf dist && vite build && electron-builder",
  },
  "build": {
    "appId": "xxx",
    "productName": "xxx",
    "asar": true,
    "copyright": "xxx",
    "directories": {
      "output": "release/${version}"
    },
    "files": [
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "xxx",
        "url": "xxx"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "xxx"
    }
  },

• 运行

npm run dev 运行命令
npm run build 打包命令