使用vite electron builder脚手架

git clone https://github.com/cawa-93/vite-electron-builder.git
git log --reverse
# 找到第一个信息
git reset --soft 755997f2ee7ae83542d6ed6dafd518ef9576af3a
git commit --amend --no-edit

在项目目录里创建文件.npmrc

registry=https://registry.npmmirror.com

electron_mirror=https://npmmirror.com/mirrors/electron/

electron-builder-binaries-mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

运行框架的初始化

npm run init

选react typescript

npm start

cd packages/renderer

安装路由库

选用React Router

npm i react-router

修改main.tsx，注意，本项目只能用HashRouter。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { HashRouter, Route, Routes } from "react-router";
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </HashRouter>
  </StrictMode>,
)

安装状态管理库

选用Valtio, makes proxy-state simple for React and Vanilla

npm install valtio

安装CSS库

选用tailwind css

npm install tailwindcss @tailwindcss/vite

修改vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),tailwindcss()],
})

修改index.css

选用emotion CSS-in-JS

npm install --save @emotion/react

使用时，在组件文件上添加：

/** @jsxImportSource @emotion/react */

安装组件库

小元件选用Ant Design of React - Ant Design

npm install antd --save

图表选用图表 - Ant Design Pro

npm install @ant-design/charts --save

界面选用ProComponents

npm i @ant-design/pro-components --save

可选组件库 shadcn/ui

添加编译时构建脚本

新建文件copy-build.mjs

import { existsSync, readdirSync, lstatSync, unlinkSync, rmdirSync, mkdirSync, statSync, copyFileSync } from 'fs';
import { join } from 'path';

function deleteRecursiveSync(directory) {
  if (existsSync(directory)) {
    readdirSync(directory).forEach(file => {
      const currentPath = join(directory, file);
      if (lstatSync(currentPath).isDirectory()) {
        deleteRecursiveSync(currentPath);
      } else {
        unlinkSync(currentPath);
      }
    });
    rmdirSync(directory);
  }
}

// 或者只删除内容保留文件夹
function clearDirectorySync(directory) {
  if (existsSync(directory)) {
    readdirSync(directory).forEach(file => {
      const currentPath = join(directory, file);
      if (lstatSync(currentPath).isDirectory()) {
        deleteRecursiveSync(currentPath);
      } else {
        unlinkSync(currentPath);
      }
    });
  } else {
    mkdirSync(directory, { recursive: true });
  }
}



function copyRecursiveSync(src, dest) {
  const exists = existsSync(src);
  const stats = exists && statSync(src);
  const isDirectory = exists && stats.isDirectory();

  if (isDirectory) {
    mkdirSync(dest, { recursive: true });
    readdirSync(src).forEach(childItemName => {
      copyRecursiveSync(
        join(src, childItemName),
        join(dest, childItemName)
      );
    });
  } else {
    copyFileSync(src, dest);
  }
}

// 使用 glob 查找所有 packages/*/dist 目录
const packagesDir = join(process.cwd(), 'packages');
const packageDirs = readdirSync(packagesDir)
  .map(pkg => join(packagesDir, pkg, 'dist'))
  .filter(distPath => existsSync(distPath));

// 确保目标目录存在
// 只清空内容不删除文件夹
clearDirectorySync('dist/build');
console.log('dist/build 文件夹内容已清空，文件夹保留');

// 复制每个 dist 目录
packageDirs.forEach(distPath => {
  copyRecursiveSync(distPath, join(process.cwd(), 'dist', 'build'));
});
// 复制 entry-point.mjs
copyRecursiveSync(join(process.cwd(), 'packages','entry-point.mjs'), join(process.cwd(), 'dist', 'build','entry-point.mjs'));

在主项目package.json下添加脚本

附录：修复 electron 安装问题

node ./node_modules/electron/install.js

如果遇到网络问题，需要分别修改 node_modules\.pnpm\electron@35.2.0\node_modules\@electron\get\dist\esm和node_modules\.pnpm\electron@35.2.0\node_modules\@electron\get\dist\cjs下的artifact-utils，把下载链接（https://github.com/electron/electron/releases/download/）改成https://npmmirror.com/mirrors/electron/