初始化vite项目yarncreatevitetodolist--templatevue-tscdtodolistyarnyarndev浏览器访问端口3000installElectronynadd-Delectronelectron-builderrimrafvite-plugin-electronIfelectron-devtools-installer觉得安装慢，可以换成淘宝镜像，或者添加.yarnrc文件registry"https://registry.npm.taobao.org/"electron_mirror"https://npm.taobao.org/mirrors/electron/"electron_builder_binaries_mirror"http://npm.taobao.org/mirrors/electron-builder-binaries/"插件说明electron-builder：打包工具rimraf：快速删除文件或目录工具vite-plugin-electron：vite组合Electron库，关于这个插件，可以参考Vite与Electron的无缝对接electron-devtools-installer：electron开发工具vite-plugin-electron插件是vite和electron的结合，可以让我们结合electron和vue非常方便，需要做一些特定的配置。初始化electron项目新建目录文件electron-main/index.ts主进程目录和文件，electron-preload/index.tspreload目录和文件//electron-main/index.tsimport{app,BrowserWindow}from'电子';从“路径”导入路径；constcreateWindow=()=>{constwin=newBrowserWindow({webPreferences:{contextIsolation:false,nodeIntegration:true,preload:path.join(__dirname,'../electron-preload/index.js'),},});如果(app.isPackaged){win.loadFile(path.join(__dirname,'../index.html'));}else{//使用['ENV_NAME']avoidvite:definepluginconsturl=`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`;win.loadURL(url);}};app.whenReady().then(()=>{createWindow();app.on('activate',()=>{//在macOS上，当//单击停靠栏图标并且没有打开其他窗口。if(BrowserWindow.getAllWindows().length===0)createWindow();});});应用程序。在（'window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});注意导入的预加载文件要打包成js文件，路径和ts文件路径一样，只要把类型改成js即可//electron-preload/index.tsimportosfrom'os';console.log(os.platform());//测试并打印系统平台配置vite-electronsconfig.json监听tsconfig.json中electron相关文件和提示"include":[...,"electron-main/**/*.ts","electron-preload/**/*.ts"]，省略号为之前的配置，复制以下代码粘贴到vite.config.tsconfiguration配置主流程和preload脚本地址import{defineConfig}from'vite';importvue来自“@vitejs/plugin-vue”；从“path”导入*作为路径；从“vite-plugin-electron”导入电子；从“vite-plugin-electron/renderer”导入electronRenderer；从“vite-plugin”导入polyfillExports-electron/polyfill-exports';exportdefaultdefineConfig({plugins:[vue(),electron({main:{entry:'electron-main/index.ts',},preload:{//必须使用绝对路径，这是汇总输入的限制：path.join(__dirname,'./electron-preload/index.ts'),},}),electronRenderer(),polyfillExports(),],build:{emptyOutDir:false,//必须配置,否则electron相关文件不会生成构建文件},});package.json配置{"name":"todolist","private":true,"version":"0.0.0","main":"dist/electron-main/index.js",//添加"scripts":{"dev":"vite","build":"vue-tsc--noEmit&&vitebuild","build-electron":"rimrafdist&&vitebuild&&electron-builder",//添加“预览":"vitepreview"},}主要是添加入口文件，因为electron本身不支持ts，所以还是要加载js文件，所以我们配置入口文件为解析后的js文件路径：dist/electron-main/index.js，然后修改执行脚本，在build-electron命令中加入electron-builder打包命令electron-builder打包配置{...,"build":{"appId":"com.electron.desktop","productName":"ElectronVueVite","asar":true,"copyright":"Copyright?2022XingXiAiXian","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}}}运行并调试yarndev，尝试F12调试，按了半天没有反应，应该是配置没有打开。修改electron-main/index.tsconstcreateWindow=()=>{...//最后添加一行代码win.webContents.openDevTools()};热更新，已经打开调试工具，打印系统平台包.yarnrunbuild-electron执行后会生成两个目录：dist和releaseist目录下生成前端包文件，release中生成electron包文件，内容如下：其中：,win-uppacked中生成的可执行文件是一个不需要安装的可执行文件，直接压缩这个目录后可以发给别人，解压即可。使用。todolist_0.0.0.exe文件是一个安装包，打开会显示installati处理中。安装过程完成后，您可以在系统控制面板的软件列表中看到该软件，也可以进行卸载。结论到此，我们的初始化项目就算结束了，相信你也能快速搭建出你的第一个桌面应用。本项目会持续更新，希望大家持续关注。项目地址https://gitee.com/javanx/todolisthttps://gitee.com/javanx/todolist-server
