一、技术选型与架构设计

在构建现代化桌面应用时，Electron作为跨平台框架的核心地位不可替代。其主进程（Main Process）与渲染进程（Renderer Process）的分离架构，配合TypeScript的类型安全特性，能有效提升开发效率与代码质量。Vite作为新一代构建工具，其基于ES Module的即时编译能力，相比传统Webpack方案可提升3-5倍构建速度。

1.1 项目目录规范

推荐采用模块化目录结构，关键目录说明如下：

src/
├── main/          # 主进程代码
│   ├── index.ts    # 入口文件
│   └── utils/     # 进程间通信工具
├── preload/       # 预加载脚本
│   └── index.ts    # 安全沙箱暴露API
├── renderer/      # 渲染进程代码
│   ├── src/       # Vue3应用源码
│   └── vite.config.ts
├── shared/        # 跨进程共享代码
└── types/         # 全局类型定义

1.2 进程通信模型

采用Context Bridge模式实现安全通信：

// preload/index.ts
import { contextBridge, ipcRenderer } from 'electron'
contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel: string, data: unknown) => {
    ipcRenderer.send(channel, data)
  },
  receive: (channel: string, func: (...args: unknown[]) => void) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args))
  }
})

二、构建工具链配置

2.1 Vite集成方案

在renderer目录下创建独立Vite配置，关键配置项：

// renderer/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: '../../src/main/index.ts',
      vite: {
        build: {
          outDir: '../dist-electron/main'
        }
      }
    })
  ],
  base: './',
  server: {
    port: 3000,
    fs: {
      strict: false // 允许访问项目根目录
    }
  }
})

2.2 TypeScript全局配置

在项目根目录创建tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/renderer/src/*"],
      "@shared/*": ["src/shared/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

三、编译打包流程

3.1 开发环境配置

package.json中配置双模式启动脚本：

{
  "scripts": {
    "dev": "vite -c src/renderer/vite.config.ts",
    "build": "npm run build:renderer && npm run build:main",
    "build:renderer": "vite build -c src/renderer/vite.config.ts",
    "build:main": "tsc -p src/main/tsconfig.main.json"
  }
}

3.2 生产构建方案

采用两阶段构建策略：

资源构建阶段：
- 编译Vue3渲染进程
- 生成主进程TypeScript代码
- 复制静态资源到输出目录

应用打包阶段：

{
"build": {
 "appId": "com.example.myapp",
 "productName": "My Application",
 "directories": {
   "output": "dist"
 },
 "files": [
   "dist-electron/**/*",
   "package.json"
 ],
 "win": {
   "target": "nsis",
   "icon": "build/icon.ico"
 },
 "mac": {
   "target": "dmg",
   "icon": "build/icon.icns"
 },
 "linux": {
   "target": "AppImage",
   "icon": "build/icon.png"
 }
}
}

3.3 自动化构建脚本

创建build.js实现全流程自动化：

const { execSync } = require('child_process')
const { removeSync } = require('fs-extra')
// 清理构建目录
removeSync('./dist')
removeSync('./dist-electron')
// 执行构建命令
execSync('npm run build:renderer', { stdio: 'inherit' })
execSync('npm run build:main', { stdio: 'inherit' })
// 打包应用（需提前安装electron-builder）
execSync('electron-builder', { stdio: 'inherit' })

四、高级优化技巧

4.1 代码分割策略

在Vite配置中启用动态导入：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          electron: ['electron']
        }
      }
    }
  }
})

4.2 进程守护机制

主进程增加崩溃重启逻辑：

import { app, BrowserWindow } from 'electron'
let mainWindow: BrowserWindow | null = null
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
app.on('activate', () => {
  if (mainWindow === null) createWindow()
})
// 进程守护
process.on('uncaughtException', (error) => {
  console.error('Main process crashed:', error)
  setTimeout(createWindow, 3000) // 3秒后重启
})

4.3 安全加固方案

启用CSP策略：

<!-- renderer/index.html -->
<meta http-equiv="Content-Security-Policy" 
   content="default-src 'self'; script-src 'self' 'unsafe-inline';">

限制Node.js集成：

new BrowserWindow({
webPreferences: {
 nodeIntegration: false,
 contextIsolation: true,
 sandbox: true
}
})

五、常见问题解决方案

5.1 跨平台路径处理

使用path.join()替代硬编码路径：

import path from 'path'
const configPath = path.join(app.getPath('userData'), 'config.json')

5.2 静态资源加载

Vite配置中添加资源处理规则：

export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 小于4KB的资源转为base64
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/main/index.ts'),
        renderer: path.resolve(__dirname, 'src/renderer/index.html')
      }
    }
  }
})

5.3 调试技巧

主进程调试：

# 启动Electron时添加参数
electron . --inspect=9229

渲染进程调试：

// vite.config.ts中配置
export default defineConfig({
server: {
 hmr: {
   clientPort: 3000
 }
}
})

通过上述标准化流程，开发者可以构建出高性能、高安全性的跨平台桌面应用。实际项目开发中，建议结合CI/CD流水线实现自动化构建与发布，进一步降低运维成本。对于企业级应用，可考虑集成日志服务、监控告警等云原生能力，提升应用的可观测性。

基于Electron+TypeScript+Vite+Vue3的跨平台应用构建全流程解析