vite ts 项目中使用electron

在 Vite 和 TypeScript 项目中使用 Electron，可以按照以下步骤进行操作：

1. 创建一个新的 Vite 项目：可以使用 `npm init vite` 命令或者手动创建一个 Vite 项目。

2. 安装 Electron：可以使用 `npm install electron` 命令来安装 Electron。

3. 修改 Vite 配置文件：在 `vite.config.ts` 文件中配置 Electron 的入口文件路径，并设置 Vite 的输出目录为 Electron 的渲染进程目录。

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    outDir: 'dist/renderer',
  },
  server: {
    port: 8000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [],
  optimizeDeps: {
    include: [
      'electron',
    ],
  },
});

4. 创建 Electron 入口文件：在项目根目录下创建一个 `main.ts` 文件，作为 Electron 的主进程入口文件。

import { app, BrowserWindow } from 'electron';
import path from 'path';

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadURL('http://localhost:8000');
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

5. 创建 Electron 预加载脚本：在项目根目录下创建一个 `preload.js` 文件，作为 Electron 的渲染进程预加载脚本。

const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.send('renderer-ready');
});

6. 在 `package.json` 中添加启动脚本：在 `package.json` 文件中添加一个启动脚本，用于启动 Electron 应用。

"scripts": {
  "start": "vite && electron ."
},

7. 运行应用：运行 `npm start` 命令启动应用即可。

以上就是在 Vite 和 TypeScript 项目中使用 Electron 的基本步骤，希望对你有帮助。