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',
});
6、配置完成
开发调试执行
npm run electron:server
打包执行
npm run electron:build