个人记录，可以参考一下

第一步

创建目录

mkdir my-electron-vue && cd my-electron-vue

初始化

npm init -y

安装依赖

npm install electron vue@3 vue-router@4
npm install -D vite @vitejs/plugin-vue concurrently wait-on

目录结构

my-electron-vue/
├── package.json
├── vite.config.js
├── src/
│   ├── main/
│   │   └── index.js          # 主进程
│   ├── preload/
│   │   └── index.js          # 预加载脚本
│   └── renderer/             # Vue 前端
│       ├── index.html
│       ├── main.js
│       ├── App.vue
│       └── components/
│           └── Hello.vue

1. package.json

{
  "name": "my-electron-vue",
  "version": "1.0.0",
  "main": "src/main/index.js",
  "scripts": {
    "dev": "concurrently \"npm run dev:vite\" \"wait-on http://localhost:5173 && electron .\"",
    "dev:vite": "vite",
    "build": "vite build && electron-builder",
    "postinstall": "electron-builder install-app-deps"
  }
}

2. src/main/index.js（主进程）

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  // 开发环境加载 Vite 服务，生产环境加载打包文件
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
    win.webContents.openDevTools()
  } else {
    win.loadFile(path.join(__dirname, '../renderer/dist/index.html'))
  }
}

app.whenReady().then(createWindow)

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

3. src/preload/index.js（预加载脚本）

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => ipcRenderer.send(channel, data),
  on: (channel, callback) => ipcRenderer.on(channel, callback)
})

4. vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  root: path.join(__dirname, 'src/renderer'),
  base: './',
  build: {
    outDir: path.join(__dirname, 'src/renderer/dist'),
    emptyOutDir: true
  }
})

（
标准 Vite 只能处理渲染进程（Vue 前端），但 Electron 还有：
• 主进程（Node.js 后端）：需要 CommonJS 格式
• 预加载脚本（中间层）：需要特殊的安全配置
electron-vite 让你用一个配置文件管理三个环境，而不需要写多个 vite.config.js。
）

场景标准 Viteelectron-vite
配置数量3 个（主进程、preload、renderer 各一个）1 个统一配置
开发启动手动分别启动一键 electron-vite dev
热更新只支持渲染进程主进程 + 渲染进程 都支持热更新
构建命令分别构建三次一次 electron-vite build 全搞定
特性WebpackVite
开发模式启动先打包所有模块，再启动服务器直接启动，按需编译
编译速度慢（项目越大越慢）快（几乎秒开）
热更新 (HMR)重新编译整个模块链只更新变更的模块
底层实现基于 Node.js 的 JavaScript 打包基于浏览器原生 ES Modules
生产构建自己实现打包逻辑用 Rollup 打包
场景WebpackVite
默认配置几乎为零，必须手动配开箱即用，零配置启动
配置复杂度高（loader/plugin 概念多）低（rollup 插件兼容）
配置文件长度通常 100+ 行通常 20-50 行
维度WebpackVite
成熟度2012 年发布，生态庞大2020 年发布，快速增长
插件数量海量（但质量参差不齐）丰富（rollup 插件通用）
框架支持所有框架都支持Vue 3 首选，React/Svelte 支持好
企业项目存量项目多新项目首选
特性ES Modules (ESM)CommonJS (CJS)
语法import/exportrequire/module.exports
加载时机静态编译时（启动时确定依赖）动态运行时（执行到才加载）
加载方式异步加载同步加载
浏览器支持✅ 原生支持（现代浏览器）❌ 不支持（需打包工具转换）
Node.js 支持✅ 原生支持（.mjs 或 type: module）✅ 默认支持
** tree-shaking**✅ 支持（天然可静态分析）❌ 难以支持（动态特性多）
this 指向undefinedmodule.exports

Vite 选择 ES Modules：

Vite 的优势原理
冷启动快浏览器原生 import，无需先打包
按需编译请求哪个模块，服务端编译哪个
天然支持 HMR静态结构让替换模块更容易
自动 Tree-shaking编译时就能确定哪些代码未使用

5. src/renderer/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

6. src/renderer/main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

7. src/renderer/App.vue

<template>
  <div class="app">
    <h1>🚀 Electron + Vue 3 运行成功</h1>
    <p>Node版本: {{ nodeVersion }}</p>
    <Hello />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Hello from './components/Hello.vue'

const nodeVersion = ref(process.versions?.node || 'N/A')
</script>

<style>
.app { text-align: center; padding: 50px; }
</style>

8. src/renderer/components/Hello.vue

<template>
  <div class="hello">
    <h2>组件测试</h2>
    <button @click="count++">点击次数: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

其他方式：
使用官方模板（更规范）

使用 electron-vite 脚手架（也是你熟悉的结构）

npm create electron-vite@latest my-app

选 Vue 模板

cd my-app
npm install
npm run dev

启动项目：

cd my-electron-vue
npm run dev
# electron # javascript # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区