如何安装并启动 electron-prokit（react+ts） 项目

参考文档

electron-prokit · GitHub（中文版）

安装脚手架

// npm 
npm create electron-prokit myapp

// yarn 
yarn create electron-prokit myapp

根据提示安装完成后，需要进入到新创建的项目中并安装依赖，如下所示

// npm
cd ./myapp && npm install

// npm
cd ./myapp && yarn install

运行项目

// npm
npm run dev

若启动出现空白页，则需要查看"运行前处理"章节

运行前处理

解决编译的 dist 文件不全问题

第一步：先查看根目录下的 dist 文件是否有 main, preload, render, work 四个文件夹

第二步：处理编译问题

在根目录下的 scripts/dev.ts 中，打开 dev.ts 文件

import { register } from 'node:module';
import { pathToFileURL } from 'node:url';
import 'ts-node/register';

register('ts-node/esm', pathToFileURL('./').href);

import createViteElectronService from '@electron-prokit/create-service';
import electronPath from 'electron';
import main from '../config/main';
import render from '../config/render';
import work from '../config/work';
import preload from '../config/preload';

// 1、第一次正常运行 npm run dev，代码不变
createViteElectronService({
    render: render,
    preload: preload,
    work: work,
    main: main,
    electronPath: electronPath,
});

// 2、第二次运行 npm run dev，注释上面的1、的代码，放开2、的代码
// createViteElectronService({
//     render: preload,
//     preload: render,
//     work: work,
//     main: main,
//     electronPath: electronPath,
// });

第二次运行后查看 dist 文件下会出现一个 render 文件夹，表示编译成功

注：打包前需要先运行一次2、的代码，然后还原

解决空白页问题

空白页最主要的问题是因为 mainWindow 加载的文件找不到或者不存在问题，只需要按照以下，如下所示：

import { join, resolve } from 'path';
import { app } from 'electron';
import { createWindow } from 'electron-prokit';
import ipc from './ipc';

const initWindowsAction = () => {
    const mainWindow = createWindow('main', {
        width: 960,
        height: 720,
        webPreferences: {
            contextIsolation: true,
            nodeIntegration: true,
            webSecurity: false,
            preload: join(__dirname, '../preload/index.cjs'),
        },
    });

    if (mainWindow) {
        // 后续可以根据实际情况进行调整
        const filePath = resolve(__dirname, '../render/index.html');
        console.log('Loading file:', filePath); // 打印路径以确认是否正确

        if (import.meta.env.MODE === 'dev') {
            // 开发环境
            if (import.meta.env.VITE_DEV_SERVER_URL) {
                console.log(import.meta.env.VITE_DEV_SERVER_URL, 'dev_url');

                mainWindow.loadURL(import.meta.env.VITE_DEV_SERVER_URL).catch(err => {
                    // console.error('Failed to load dev server:', err);
                    // Fallback 到静态文件
                    mainWindow.loadFile(filePath);
                });
            }
        } else {
            // 生产环境
            mainWindow.loadFile(filePath);
        }
    }
};

app.whenReady().then(() => {
    initWindowsAction();
    ipc();
});

注：若开发环境是使用 loadFile() 加载渲染文件，在修改前端代码时，是不会实时更新页面的

运行后，报 stderr: (node:49408) electron: Failed to load URL: http://localhost:5173/ with error: ERR_CONNECTION_REFUSED

解决方式： 在终端输入以下命令

npx vite --host

然后点击本地浏览器打开 http://localhost:5173/ (默认)，可以访问表示设置成功，后续只需要正常运行项目即可