Electron+React配置与打包#

1
npm init vite

1
npm install
2
cnpm install electron --save
3
npm install -g electron

1
// 引入electron并创建一个Browserwindow
2
const {app, BrowserWindow} = require('electron')
3
const path = require('path')
4
const url = require('url')
5
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
6
let mainWindow
7
function createWindow () {
8
//创建浏览器窗口,宽高自定义具体大小你开心就好
9
    mainWindow = new BrowserWindow({width: 800, height: 600})
10
    /*
11
    * 加载应用----- electron-quick-start中默认的加载入口
12
    mainWindow.loadURL(url.format({
13
    pathname: path.join(__dirname, 'index.html'),
14
    protocol: 'file:',
15
    slashes: true
16
    }))
17
    */
18
    // 加载应用----react 打包
19
    mainWindow.loadURL(url.format({
20
        pathname: path.join(__dirname, './dist/index.html'),
21
        protocol: 'file:',
22
        slashes: true
23
    }))
24
    // 加载应用----适用于 react 开发时项目
25
    // mainWindow.loadURL('http://localhost:3000/');
26

27

28
    // 打开开发者工具，默认不打开
29
    // mainWindow.webContents.openDevTools()
30
    // 关闭window时触发下列事件.
31
    mainWindow.on('closed', function () {
32
        mainWindow = null
33
    })
34
}
35
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
36
app.on('ready', createWindow)
37
// 所有窗口关闭时退出应用.
38
app.on('window-all-closed', function () {
39
    // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
40
    if (process.platform !== 'darwin') {
41
        app.quit()
42
    }
43
})
44
app.on('activate', function () {
45
    // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
46
    if (mainWindow === null) {
47
        createWindow()
48
    }
49
})

1
const { contextBridge } = require('electron')
2
const koffi=require("koffi")
3
const user32=koffi.load("user32.dll")
4
const sendMessage=user32.func("MessageBoxA","int",["int","string","string","int"])
5
function sendMessageJs(title,content){
6
    sendMessage(0,title,content,0)
7
}
8
contextBridge.exposeInMainWorld('myAPI', {
9
    desktop: true,
10
    sendMessage:sendMessageJs
11
})

1
    mainWindow = new BrowserWindow({
2
        width: 800,
3
        height: 600,
4
        frame:true,
5
        webPreferences: {
6
            preload: path.join(__dirname, 'preload.cjs'),
7
            nodeIntegration:true,
8
            contextIsolation:true,
9
        }
10
    })

1
{
2
  "name": "vite_react_electron",
3
  "private": true,
4
  "version": "0.0.0",
5
  "type": "module",
6
  "main": "main.cjs", //主函数的入口
7
  "homepage":".",
8
  "build": {
9
    "appId": "xxx",
10
    "copyright": "xxx",
11
    "productName": "xxx",
12
    "icon": "xxx",
13
    "win": {
14
      "target": [
15
        "portable"
16
      ]
17
    },
18
    "directories": {
19
      "output": "build"
20
    }
21
  },
22
  "scripts": {
23
    "dev": "vite",
24
    "build": "vite build",
25
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
26
    "preview": "vite preview",
27
    "electron-start": "electron ." //electron的调试
28
  },
29
  "dependencies": {
30
    "electron": "^29.1.0",
31
    "react": "^18.2.0",
32
    "react-dom": "^18.2.0"
33
  },
34
  "devDependencies": {
35
    "@types/react": "^18.2.43",
36
    "@types/react-dom": "^18.2.17",
37
    "@vitejs/plugin-react": "^4.2.1",
38
    "eslint": "^8.55.0",
39
    "eslint-plugin-react": "^7.33.2",
40
    "eslint-plugin-react-hooks": "^4.6.0",
41
    "eslint-plugin-react-refresh": "^0.4.5",
42
    "vite": "^5.0.8"
43
  }
44
}

1
export default defineConfig({
2
  plugins: [react()],
3
  base: "./",
4
  server:{
5
    port:3000 //端口号修改为3000
6
  }
7
})

1
npm run dev

1
npm run electron-start

1
npm install electron-builder -g

1
"build": {
2
    "appId": "xxx",
3
    "copyright":"xxx",
4
    "productName":"xxx",// 软件名
5
    "icon": "xxx",// 图标
6
    "win": {
7
      "target": [
8
        "portable"// 写这个参数就可以打包成单个exe文件了
9
      ]
10
    }

1
electron-builder