vue3+ts+vite+electron+electron-store+electron-builder打包可安装包

yarn create vite

yarn add electron

 yarn add electron-store

 yarn add electron-builder

 新增main.js、preload.js

// main.js
const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron')
const path = require('path')
let store // 我们将在稍后动态导入 electron-storelet mainWindow = nullconst createWindow = () => {mainWindow = new BrowserWindow({width: 1200, // 打开界面宽minWidth: 1200, // 打开界面最小宽height: 800, // 打开界面高minHeight: 800, // 打开界面最小高fullscreen: false, // 是否启动全屏resizable: true, // 是否允许调整窗口大小autoHideMenuBar: true, // 工具栏隐藏alwaysOnTop: true, // 窗口是否总是显示在其他窗口的上方icon: path.join(__dirname, './public/favicon.ico'), // 设置窗口图标webPreferences: {// 与网页相关的偏好设置preload: path.join(__dirname, 'preload.js'),contextIsolation: true,nodeIntegration: false}})if (process.env.VITE_DEV_SERVER_URL) {mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)} else {mainWindow.loadFile(path.join(__dirname, './dist/index.html'))}// 注册刷新页面快捷键globalShortcut.register('Ctrl+R', () => {mainWindow.reload()})// 注册打开控制台快捷键globalShortcut.register('Ctrl+Shift+I', () => {mainWindow.webContents.openDevTools()})mainWindow.on('closed', () => {mainWindow = null// 注销所有快捷键globalShortcut.unregisterAll()})
}app.whenReady().then(async () => {const Store = (await import('electron-store')).defaultstore = new Store()createWindow()// 在所有窗口关闭时注销快捷键app.on('window-all-closed', () => {globalShortcut.unregisterAll()if (process.platform !== 'darwin') {app.quit()}})app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})ipcMain.handle('getStoreValue', (event, key) => {return store.get(key)
})ipcMain.handle('setStoreValue', (event, key, value) => {store.set(key, value)
})
ipcMain.handle('delStoreValue', () => {store.clear()console.log('已经清理')
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')// 向渲染进程暴露 Electron 特定的 API
contextBridge.exposeInMainWorld('electron', {getStoreValue: (key) => ipcRenderer.invoke('getStoreValue', key),setStoreValue: (key, value) =>ipcRenderer.invoke('setStoreValue', key, value),delStoreValue: () => ipcRenderer.invoke('delStoreValue')
})// 添加全局变量来指示是否在 Electron 环境中运行
contextBridge.exposeInMainWorld('isElectron', true)window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],base: "./",    // 必须
});

 

// app页面添加electron-store测试代码
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
// 用于测试electron-store
setTimeout(() => {console.log('写入', window.electron)window.electron.setStoreValue('key', '我是写入数据')}, 1000)setTimeout(() => {const v = window.electron.getStoreValue('key')console.log('读取', v)}, 5000)</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

// src/electron.d.tsexport interface ElectronAPI {getStoreValue: (key: string) => Promise<any>;setStoreValue: (key: string, value: any) => Promise<void>;
}declare global {interface Window {electron: ElectronAPI;}
}

 

 "name": "test","private": true,"version": "0.0.0",  // 新增"description": "hello world",// 新增"main": "main.js", // 新增"author": "han",  // 新增"license": "MIT",   // 新增
"scripts": {"dev": "vite","build": "vue-tsc -b && vite build","start": "electron .",    // 新增"build-builder": "electron-builder",  // 新增"preview": "vite preview"},"build": {  // 新增build"appId": "com.yourcompany.yourapp","win": {"target": "nsis","icon": "./public/icon.ico"},"linux": {"icon": "./public/icon.png"},"dmg": {"contents": [{"x": 410,"y": 150,"type": "link","path": "/Applications"},{"x": 130,"y": 150,"type": "file"}]},"mac": {"icon": "./public/icon.ico"},"files": ["dist/**/*","main.js","preload.js"],"directories": {"output": "awBack2"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "aw"}},

yarn build 

yarn start 

 

yarn build-builder 

{"name": "test","private": true,"version": "0.0.0","description": "hello world","main": "main.js","author": "han","license": "MIT","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","start": "electron .","build-builder": "electron-builder","preview": "vite preview"},"build": {"appId": "com.yourcompany.yourapp","win": {"target": "nsis","icon": "./public/icon.ico"},"linux": {"icon": "./public/icon.png"},"dmg": {"contents": [{"x": 410,"y": 150,"type": "link","path": "/Applications"},{"x": 130,"y": 150,"type": "file"}]},"mac": {"icon": "./public/icon.ico"},"files": ["dist/**/*","main.js","preload.js"],"directories": {"output": "awBack2"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "aw"}},"dependencies": {"electron-store": "^10.0.0","vue": "^3.4.37"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","electron": "^32.0.1","electron-builder": "^24.13.3","typescript": "^5.5.3","vite": "^5.4.1","vue-tsc": "^2.0.29"}
}