Electron + Vite + Vue 项目搭建

以下是一个简化的例子，展示如何使用Vite创建一个基于Vue的Electron项目。

首先，确保你已经安装了Node.js。

1. 安装Vite和Vue的命令行工具：

npm init vite@latest

2. 按照提示进行操作，选择Vue作为框架，并为你的项目起一个名字。
3. 进入项目目录，并安装Electron相关依赖：

cd your-project-name
npm install
npm add electron electron-builder --save-dev

4. 修改vite.config.js，添加Electron的入口文件main.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    // 添加一个新的目标平台 'electron'
    target: 'electron-renderer',
    // 在开发模式下不打包主进程
    lib: {
      entry: 'main.js',
      formats: ['cjs']
    },
    rollupOptions: {
      external: ['electron']
    }
  }
})

5. 在项目根目录下创建main.js，作为Electron的主进程文件：

const { app, BrowserWindow } = require('electron')
 
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadURL('http://localhost:3000') // 指向Vite开发服务器
}
 
app.whenReady().then(createWindow)

6. 修改package.json，添加Electron的脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "electron . --serve",
    "electron:build": "electron ."
  }
}

7. 现在你可以启动Electron应用了：

npm run electron:serve

这将启动Electron，并连接到Vite开发服务器。

要打包你的Electron应用，可以使用：

npm run build
npm run electron:build

这将生成一个可以发布的应用程序。