vite+react-ts+electron 开发桌面端

代码仓库
https://gitee.com/dmhsq/react-ts-vite-electron
https://github.com/promiseHusky/react-ts-vite-electron

vite搭建项目

npm init vite@latest my-electron

选择 react-ts

安装依赖包

npm i concurrently electron cross-env -D

  
 

  
1
 

创建main.js

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

class AppWindow extends BrowserWindow {
  constructor(config, urlLocation) {
    const basicConfig = {
      width: 800,
      height: 600,
      webPreferences: {
        contextIsolation: false,
        nodeIntegration: true,
        enableRemoteModule: true,
        nodeIntegrationInWorker: true,
      },
      show: false,
      backgroundColor: '#efefef',
    };
    const finalConfig = { ...basicConfig, ...config };
    super(finalConfig);
    this.loadURL(urlLocation);
    this.once('ready-to-show', () => {
      this.show();
    });
  }
}

app.on('ready', () => {
  const mainWindowConfig = {
    width: 1440,
    height: 768,
  };
  const urlLocation = 'http://localhost:3000';
  mainWindow = new AppWindow(mainWindowConfig, urlLocation);
  mainWindow.on('closed', () => {
    mainWindow = null;
    app.quit();
  });
});
  
 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

配置package.json文件

{
  "name": "my-electron",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "dev": "concurrently \"electron .\" \"cross-env BROWSER=none vite\""
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "concurrently": "^7.0.0",
    "cross-env": "^7.0.3",
    "electron": "^17.1.2",
    "typescript": "^4.5.4",
    "vite": "^2.8.0"
  }
}
  
 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
 

运行

执行 npm run dev即可运行

关于打包

逻辑是

打包 react
打包 electron main.js 复制资源(logo.ico)
打包 electron

使用electron-builder

文章来源: dmhsq.blog.csdn.net，作者：代码哈士奇，版权归原作者所有，如需转载，请联系作者。

原文链接：dmhsq.blog.csdn.net/article/details/123477599