Vue3vite项目，结合electron和electron-builder

Vue3vite项目，结合electron和electron-builder

1、打包Vue3项目

将Vue3项目打包生成dist

2、项目中安装electron和electron-builder

npm i electron -D
npm i electron-builder -D

3、package.json文件修改

{
  "main": "main.js",
  "type": "commonjs",
  "scripts": {
    "electron:start": "electron .",
    "electron:build": "electron-builder --dir"
  },
  "build": {
    "productName": "electronVue3",
    "appId": "com.electronVue3.demo",
    "directories": {
      "output": "electronDist"
    }
  },
}
// 还有其余配置自己去看文档

4、根目录下创建main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });
  // 注意：
  //  因为我们加载的是Vue 构建后的dist 目录，所以我们需要改一下， load
  //  的文件地址。
  win.loadFile("dist/index.html");
}

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

5、测试

// 运行electron:start命令,没问题可以开始打包了
npm run electron:start
// 运行electron:build
npm run electron:build
// 打包成功后项目根目录下会生成electronDist文件夹里面就是打包的electron