electron+umiJS4-react - 搭建桌面应用 - 使用umjs4搭建electron

最新推荐文章于 2024-09-12 08:00:55 发布

香辣鱼干

最新推荐文章于 2024-09-12 08:00:55 发布

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： electron入门文章标签： electron javascript 前端 react.js 前端框架

本文链接：https://blog.youkuaiyun.com/qiaolezi787/article/details/132231724

electron入门专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用命令行工具在umi框架下创建和配置一个Electron应用，包括安装依赖、设置主进程、创建启动脚本，以及在.umirc.ts中管理环境变量。遇到npminstall问题时提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、打开命令行工具，切换路劲到工作空间下，执行一下脚本，创建项目

npx create-umi@latest

命令执行后，进入到你创建成功后目录中

2、安装必要（常用）的依赖

npm install electron electron-builder concurrently cross-env vite wait-on -D

npm安装electron 总是不成功.会卡在reify:lodash: timingreifyNode:node_modules/@types/node Completed in 578ms这里。

解决办法

先运行

npm install -g cnpm --registry=https://registry.npmmirror.com

再运行

cnpm install electron electron-builder concurrently cross-env vite wait-on -D

这时就能安装成功了

3、项目根目录下创建electron文件夹，electron文件夹下创建main.js

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

// 需要安装件 cross-env
const NODE_ENV = process.env.NODE_ENV;

function createWindow() {
    const win = new BrowserWindow({
        width: 1200,
        height: 700,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false, // 设置为false，才能在渲染进程中使用electron api
        },
    });

    win.loadURL(NODE_ENV === 'development' ? `http://localhost:8000` : `file://${path.join(__dirname, '../dist/index.html')}`);
    if (NODE_ENV === 'development') {
        win.webContents.openDevTools();
    }
}

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

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

4、packge.json中添加启动electron的启动脚本和electron程序入口

{
    "name": "umi-electron",
    "version": "0.0.0",
    "private": true,
    "author": "",
    "main": "electron/main.js",
    "scripts": {
        "dev": "umi dev",
        "build": "umi build",
        "postinstall": "umi setup",
        "setup": "umi setup",
        "start": "npm run dev",
        "electron": "wait-on tcp:8000 && cross-env NODE_ENV=development electron .",//新增
        "electron:server": "cross-env ELECTRON_BUILD=false concurrently -k \"npm start\" \"npm run electron\"",//新增
        "electron:build": "cross-env ELECTRON_BUILD=true npm run build && electron-builder"//新增
    },
    "build": {
        "productName": "umi-electron",
        "copyright": "Copyright C 2021 yxln",
        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true
        },
        "files": [
            "dist/**/*",
            "electron/**/*"
        ],
        "directories": {
            "buildResources": "assets",
            "output": "dist_electron"
        }
    },
    "dependencies": {
        "umi": "^4.0.75"
    },
    "devDependencies": {
        "@types/react": "^18.0.33",
        "@types/react-dom": "^18.0.11",
        "concurrently": "^8.2.0",
        "cross-env": "^7.0.3",
        "electron": "^25.5.0",
        "electron-builder": "^24.6.3",
        "typescript": "^5.0.3",
        "vite": "^4.4.9",
        "wait-on": "^7.0.1"
    }
}

5、.umirc.ts中添加环境变量修改程序加载主页的路径

import { defineConfig } from "umi";

export default defineConfig({
  routes: [
    { path: "/", component: "index" },
    { path: "/docs", component: "docs" },
  ],
  history: { type: 'hash' },//新增
  publicPath: process.env.ELECTRON_BUILD == 'true' ? './' : '/',//新增
  npmClient: 'npm',
});