vite工程集成electron的简单demo

第一步：创建 Vue 工程，并安装依赖

npm create vite vue-electron
cd vue-electron
npm i

第二步：安装 electron 相关依赖

## 注意electron与vite-plugin-electron的版本匹配问题
npm i -D electron vite-plugin-electron

第三步：创建 electron/main.ts

import { app, BrowserWindow } from "electron";
app.whenReady().then(() => {
  //加载Vue工程启动后的URL地址
  new BrowserWindow().loadURL("http://localhost:5173");
});

第四步：修改 vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//导入插件
import electron from "vite-plugin-electron";

export default defineConfig({
  plugins: [
    vue(),
    //注册插件
    electron({
      entry: "./electron/main.ts",
    }),
  ],
});

第五步：在 package.json 文件中新增："main": "dist-electron/main.js"

{
  "name": "vue-electron",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "^28.2.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.4",
    "vite-plugin-electron": "^0.28.2",
    "vue-tsc": "^1.8.27"
  }
}

最后启动项目

 npm run dev