2-electron-vite脚手架

electron-vite

• 地址: 快速开始 | electron-vite
• pnpm create vite
• 安装: pnpm i electron -D
• 安装: pnpm i concurrently
  • 同时管理多个应用
  • 配置命令

{
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\"",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
}

• 试一下能不能跑起来 pnpm dev如下能启动就ok了

再设置package.json的脚本

{
  "name": "vite-electornls",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron/main.js",
  "scripts": {
    "dev": "concurrently \"vite\" \"electron .\"",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.32"
  },
  "devDependencies": {
    "@types/node": "^24.12.2",
    "@vitejs/plugin-vue": "^6.0.5",
    "@vue/tsconfig": "^0.9.1",
    "electron": "^39.8.7",
    "typescript": "~6.0.2",
    "vite": "^8.0.4",
    "vue-tsc": "^3.2.6",
    "wait-on": "^9.0.4",
    "concurrently": "^9.2.1"
  }
}

• electron/main.js

import { BrowserWindow, app } from "electron";
// import path from "node:path";
const createWindow = () => {
  const win = new BrowserWindow({
    width: 600,
    height: 600,
    alwaysOnTop: true, // 窗口置顶
    x: 1000, // 窗口位置
    y: 100, // 窗口位置
  });
  win.loadURL("http://localhost:5173/"); // 把vue本地开发的地址放在这里
};

app.whenReady().then(() => {
  createWindow();
});

注意 nodejs的版本

• 不同的electron版本需要不同nodejs环境