electron+vite笔记

1、配置国内electron  镜像

     .npmrc

     electron_mirror=https://registry.npmmirror.com/-/binary/electron/

    electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

2、创建vite项目

      pnpm create vite

3、测试

     pnpm dev-------------------查看  package.json  文件

4、配置vite.config.ts，让他运行直接打开

     server: {

    open: true,

    port: 3211,

  },

5、安装electron

     pnpm i electron -D    安装electron

   pnpm i electron-builder -D    安装编译器

6、配置electron

         "start": "electron ."

   pnpm i concurrently   -D  可以同时启动多个，目的是开发环境加载网址，生产环境加载本地文件

创建main文件夹在src中，作为electron文件夹存放文职，创建main.js

const { app, BrowserWindow, screen } = require("electron");
// import path from "path";
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        x: 0,
        y: 0,
        frame: false, // 隐藏窗口的顶部菜单栏和标题栏
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
        //  webPreferences: { preload: path.join(__dirname, "preload.ts") },
    });
    // 获取主屏幕的分辨率
    const screenRect = screen.getPrimaryDisplay().bounds;
    console.log(
        `Screen Width: ${screenRect.width}, Screen Height: ${screenRect.height}`
    );

    // 设置窗口大小和位置
    win.setBounds({
        x: 0,
        y: 0,
        width: screenRect.width,
        height: screenRect.height,
    });
    // win.loadFile("index.html");
    win.loadURL("http://127.0.0.1:3211");
};
app.whenReady().then(() => {
    createWindow();
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length == 0) {
            createWindow();
        }
    });
    app.on("window-all-closed", () => {
        if (process.platform !== "darwin") app.quit();
    });
});

配置启动文件package.json

 

同时启动vite和electron

7. 打包

   vite打包的时候打包到dist文件夹下，配置vite.config.ts中配置本地路径

  

 8、把渲染进程创建一个文件放入里面，好区分

   render

   跳过更改，然后把index.htm更改下进入路径

 根据执行命令加载本地文件还是网址

    if (process.env.npm_lifecycle_event === "start") {
        win.loadURL("http://127.0.0.1:3211");
        win.webContents.openDevTools();
        //快捷命令shift+ctrl+i
    } else {
        win.loadFile("dist/index.html");
    }