初始化

npm init vue
cnpm install
cnpm i electron electron-builder -D

在src目录下新建background.ts（electron主进程文件）

在根目录下新建文件夹plugins，在里面新建vite.electron.dev.ts以及vite.electron.build.ts（避免启动两个终端分别启动vue和electron）

配置开发环境electron

编辑vite.electron.dev.ts

import type {Plugin} from "vite";
import type {AddressInfo} from "net";
import {spawn} from 'child_process';
import fs from 'node:fs'


const buildBackground=()=>{{
    // vite的开发环境使用esbuild，打包环境使用rollup, 将ts编译为js
    require('esbuild').buildSync({
        entryPoints:['src/background.ts'],
        bundle:true,
        outfile:'dist/background.js',
        platform:'node',
        target:'node12',
        external:['electron']
    })
}}
export const electronDevPlugin=():Plugin=>{
    return{
        name:'electron-dev',
        configureServer(server){
            buildBackground()
            server?.httpServer?.once('listening',()=>{
                // 读取vite服务的信息
                const addressInfo=server.httpServer?.address() as AddressInfo
                // 拼接ip地址
                const IP=`http://localhost:${addressInfo.port}`
                // 利用进程传递参数, 第0个参数：require()返回路径（electron的入口文件），electron不认识ts文件，第1个参数：路径，第2个参数：IP
                let electronProcess = spawn(require('electron'),['dist/background.js',IP])
                // 监控文件，热更
                fs.watchFile('src/background.ts',()=>{
                    electronProcess.kill()
                    buildBackground()
                    electronProcess=spawn(require('electron'),['dist/background.js',IP])
                })
                // 监听日志
                electronProcess.stderr.on('data',(data)=>{
                    console.log(data.toString())
                })
            })
        }
    }
}

编辑tsconfig.node.json，在include加上：

"plugins/**/*.ts",

编辑background.ts

// electron 主进程
import {app,BrowserWindow} from 'electron'

app.whenReady().then(()=>{
    const win=new BrowserWindow({
        width:1280,
        height:720,
        webPreferences: {
            nodeIntegration:true, // 可以在渲染进程中使用node的api
            contextIsolation:false, // 关闭渲染进程的沙箱
            webSecurity:false // 关闭CORS
        }
    })

    if(process.argv[2]){
        win.loadURL(process.argv[2]) // 开发环境
    }
    else{
        win.loadFile('index.html') // 生产环境
    }

})

编辑vite.config.ts，导入并添加开发环境插件

import {electronDevPlugin} from "./plugins/vite.electron.dev";

在plugins处加入

electronDevPlugin(),

配置生产环境electron

编辑vite.electron.build.ts

2024/06/11更新：取消注释files:['**/*'],

import type {Plugin} from "vite";
import fs from 'node:fs'
import * as electronBuilder from 'electron-builder';
import * as path from "node:path";

// 防止没有npm run dev，直接npm run build而找不到js
const buildBackground=()=>{{
    // vite的开发环境使用esbuild，打包环境使用rollup, 将ts编译为js
    require('esbuild').buildSync({
        entryPoints:['src/background.ts'],
        bundle:true,
        outfile:'dist/background.js',
        platform:'node',
        target:'node12',
        external:['electron']
    })
}}

export const electronBuildPlugin=():Plugin=>{
    return{
        name:'electron-build',
        // 等vite打包完成
        closeBundle() {
            buildBackground()
            // electron-builder需要指定package.json
            const packageJson=JSON.parse(fs.readFileSync('package.json','utf-8'))
            packageJson.main='background.js'
            fs.writeFileSync('dist/package.json',JSON.stringify(packageJson,null,4))
            fs.mkdirSync('dist/node_modules') // 弄一个空的文件夹防止bug

        //     打包
            electronBuilder.build({
                config:{
                    directories:{
                        output:path.resolve(process.cwd(),'release'),
                        app:path.resolve(process.cwd(),'dist'),
                    },
                    files:['**/*'],
                    asar:true, // 压缩
                    // appId:'com.example.app',
                    productName:'media-transformer',
                    nsis:{
                        oneClick:false, // 取消一键安装
                        allowToChangeInstallationDirectory: true, //允许用户选择安装目录
                    }
                },
            })
        },
    }
}

编辑vite.config.ts，导入并添加生产环境插件

import {electronBuildPlugin} from "./plugins/vite.electron.build";

在plugins处加入

electronBuildPlugin()

参考链接

小满Vue3（第三十九章 electron桌面程序）_哔哩哔哩_bilibili