Vue3项目改造为electron桌面端

第一步先下载依赖

pnpm install--save-dev electron electron-builder
pnpm install vite-plugin-electron

第二步根目录创建electron文件夹，放入index.js

js 复制代码

```import { app, BrowserWindow } from "electron";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

let mainWindow;

async function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  if (process.env.NODE_ENV === "development") {
    // 根据自己地址修改
    await mainWindow.loadURL("http://localhost:8848");
    mainWindow.webContents.openDevTools();
  } else {
    await mainWindow.loadFile(path.join(__dirname, "../dist/index.html"));
  }
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

app.on("activate", () => {
  if (mainWindow === null) createWindow();
});

第三步添加vite插件

第四步根目录创建electron.config.json

当然也可以直接修改vite.config.ts中build的配置，这里选择新创建json

js 复制代码

{
  "appId": "com.example.vue-electron",
  "productName": "viteElectron",
  "npmRebuild": false, // 关键：禁止自动重建原生模块
  "files": [
    "dist/**/*",
    "electron/**/*",
    "!**/node_modules",
    {
      "from": "node_modules/canvas/build/Release",
      "to": "resources/node_modules/canvas/build/Release" // 手动包含编译后的二进制文件
    }
  ],
  "directories": {
    "output": "release",
    "buildResources": "public"
  },
  "win": {
    "t添加脚本命令
    arget": ["nsis", "portable"],
    "icon": "public/icon.ico",
    "artifactName": "${productName}-${version}-${arch}.${ext}",
    "extraResources": [
      // 确保原生模块被打包
      {
        "from": "node_modules/canvas/build/Release",
        "to": "app.asar.unpacked/node_modules/canvas/build/Release"
      }
    ]
  },
  "nsis": {
    "oneClick": false,
    "perMachine": false,
    "allowToChangeInstallationDirectory": true
  },
  "asar": false, // 禁用 asar 以便原生模块能正确加载
  "buildDependenciesFromSource": false, // 禁止从源码构建依赖
  "nodeGypRebuild": false // 双重保险：禁用 node-gyp 重建
}