当前位置：首页 > news >正文

Electron + ts + vue3 + vite

news 2025/8/16 12:49:24

正常搭建脚手架：npm create vite@latest 项目名称
安装electron的相关依赖：注：安装时终端url要项目名那一层
安装npm install electron -D
安装打包工具：npm install electron-builder -D
开发工具：npm install electron-devtools-installer -D
配置文件：npm install vite-plugin-electron -D，npm install vite-plugin-electron-renderer -D

在项目的根目录下新建electron-main文件夹，之后新建index.ts，配置如下：

import { app, BrowserWindow } from "electron";
import * as path from "path";// 本地启动的vue项目路径
const vueProjectAddress = "http://localhost:5173"
/*** 创建一个新的窗口*/
const createWindow = () =>{const win = new BrowserWindow({webPreferences: {contextIsolation: false, // 是否开启隔离上下文nodeIntegration: true, // 渲染进程使用Node API},});if (app.isPackaged) {win.loadFile(path.join(__dirname, "../index.html"));} else {win.loadURL(vueProjectAddress);}
};
// 打开窗口
app.whenReady().then(() => {createWindow(); // 创建窗口app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});
// 关闭窗口
app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}
});

在tsconfig.app.json中的include增加配置"electron-main/**/*.ts"

"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"electron-main/**/*.ts"
]

在vite.config.ts配置

import electron from "vite-plugin-electron";
import electronRenderer from "vite-plugin-electron-renderer";
export default defineConfig({plugins: [vue(),electron({entry: "electron-main/index.ts", // 主进程文件}),electronRenderer(),],build: {emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录},
})

打开package.json，增加以下配置：

{"name": "my-vue-app","private": true,"version": "0.0.0","main": "dist-electron/index.js", // 新增"scripts": {"dev": "vite","build": "vue-tsc && rimraf dist && vite build && electron-builder","preview": "vite preview"},// build 新增"build": {"appId": "com.smallpig.desktop","productName": "smallpig","asar": true,"copyright": "Copyright © 2022 smallpig","directories": {"output": "release/${version}"},"files": ["dist"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},// 新增"publish": [{"provider": "generic","url": "http://127.0.0.1:8080"}],"releaseInfo": {"releaseNotes": "版本更新的具体内容"}},"dependencies": {"electron-devtools-installer": "^3.2.0","vue": "^3.2.45"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","electron": "^22.0.2","electron-builder": "^23.6.0","install": "^0.13.0","npm": "^9.3.0","polyfill-exports": "^0.4.0-beta.2","rimraf": "^4.1.0","typescript": "^4.9.3","vite": "^4.0.0","vite-plugin-electron": "^0.11.1","vite-plugin-electron-renderer": "^0.11.4","vue-tsc": "^1.0.11"}
}