Create file src/electron/main/main.ts and src/electron/preload/preload.ts
// src/electron/main/main.tsimport{join}from'path';import{app,BrowserWindow}from'electron';constisDev=process.env.npm_lifecycle_event==="app:dev" ? true : false;functioncreateWindow(){// Create the browser window.constmainWindow=newBrowserWindow({width: 800,height: 600,webPreferences: {preload: join(__dirname,'../preload/preload.js'),},});// and load the index.html of the app.if(isDev){mainWindow.loadURL('http://localhost:3000');mainWindow.webContents.openDevTools();// Open the DevTools.}else{mainWindow.loadFile(join(__dirname,'../../index.html'));}// mainWindow.loadURL( //this doesn't work on macOS in build and preview mode// isDev ?// 'http://localhost:3000' :// join(__dirname, '../../index.html')// );}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(()=>{createWindow()app.on('activate',function(){// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if(BrowserWindow.getAllWindows().length===0)createWindow()})});// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});
// src/electron/preload/preload.ts// All of the Node.js APIs are available in the preload process.// It has the same sandbox as a Chrome extension.window.addEventListener('DOMContentLoaded',()=>{constreplaceText=(selector:any,text:any)=>{constelement=document.getElementById(selector)if(element)element.innerText=text}for(constdependencyof['chrome','node','electron']){replaceText(`${dependency}-version`,process.versions[dependency])}})
Add a break point in the main process src/electron/main/main.ts.
Open the Run and Debug (Ctrl+Shift+D) tool, and select Debug Main Process.
Note: Before using the debug tool to debug the main process, you should run the preview script npm run app:preview first to build the Vue app.
Update
2022/08/16: add pinia🍍 and vue-router
About
This is an electron app template created with vite, vue3 and typescript. Very simple and easy to use.