一、介绍首先介绍一下vite和Electron。Vite是一款全新的前端构建工具，可以显着提升前端开发体验。由Youda推出，其帖子称“永远不要回到webpack...”Electron是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。将Chromium和Node.js嵌入到Electron二进制文件中，您可以维护JavaScript代码库并创建可在Windows、macOS和Linux上运行的跨平台应用程序——无需本地开发经验。当我开始使用vue开发桌面应用时，首先搜索得知目前有两种现成的解决方案：electron-vue：该项目集成度较好，封装比较完整。中文搜索文章多也是解决办法，可以直接使用。但问题在于其内置的electron版本太低。写文章时看到的版本是2.0.4，electron最新版本是15.1.2。VueCLIPluginElectronBuilder：此解决方案已集成到vue-cli中。使用vueaddelectron-builder后可以直接上手，省去了基本的配置步骤。但是只能在vue-cli下使用，不能和vite一起使用。因此，如果要使用vite和electron，需要自己配置。二、创建Vite项目1、安装viteyarncreatevite2。创建项目创建命令如下：yarncreatevite--templatevue在这里创建一个名为kuari的项目。yarncreatevitekuari--templatevue3.进入并运行进入项目，运行前需要安装依赖。cdkuariyarninstallyarndev在键入命令的那一刻几乎已经在运行，值得一试。这时候根据输出，打开地址预览，就可以看到初始化页面了。至此，一个基本的vite项目已经创建完成。3.配置Electron1。官方文档在Electron官网的快速入门文档中，有使用html、javascript、css创建electron应用的官方示例，也可以参考vite+electron方案。2.安装首先安装electron到vite应用。electron的当前版本是^15.1.2。纱线添加--develectron3。配置文件1)vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'//添加//https://vitejs.dev/config/exportdefaultdefineConfig({base:path.resolve(__dirname,'./dist/'),//addplugins:[vue()]})2)main.js新建文件main.js，需要注意的是本篇内容中index.html的加载路径与electron官网给出的配置不同。//main.js//控制应用程序生命周期和创建原生浏览器窗口的模块const{app,BrowserWindow}=require('electron')constpath=require('path')functioncreateWindow(){//创建浏览器windowconstmainWindow=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'preload.js')}})//加载index.htmlmainWindow.loadFile('dist/index.html')//这里的路径和electron官网不同，需要注意//打开开发工具//mainWindow.webContents.openDevTools()}//这个程序会在最后初始化Electron//并在创建浏览器时调用window//有些API只能在ready事件触发后才能使用。app.whenReady().then(()=>{createWindow()app.on('activate',function(){//通常在macOS上，当点击dock中的应用程序图标时，如果没有别的//If(BrowserWindow.getAllWindows().length===0)createWindow()})})//当除macOS之外的所有窗口关闭时退出程序。因此，通常程序及其在任务栏上的//图标应保持活动状态，直到用户使用Cmd+Q退出。app.on('window-all-closed',function(){if(process.platform!=='darwin')app.quit()})//在此文件中，您可以包含应用程序的所有其余部分部分代码，//也可以拆分成几个文件，然后用require导入。3)preload.js创建一个新文件preload.js。//preload.js//所有Node.jsAPI在预加载期间可用。//它与Chrome扩展具有相同的沙箱。window.addEventListener('DOMContentLoaded',()=>{constreplaceText=(selector,text)=>{constelement=document.getElementById(selector)if(element)element.innerText=text}for(constdependencyof['chrome','node','electron']){replaceText(`${dependency}-version`,process.versions[dependency])}})4)package.json需要修改，以保证相关的electron命令可以运行package.json文件。首先，您需要设置主要属性。默认情况下，Electron会在一开始就在项目的根目录下搜索index.js文件。这里我们使用了main.js，所以我们需要定义它。//package.json{"name":"kuari","version":"0.0.0","main":"main.js",//添加"scripts":{"dev":"vite","build":"vitebuild","serve":"vitepreview"},"dependencies":{"vue":"^3.2.16"},"devDependencies":{"@vitejs/plugin-vue":"^1.9.3","electron":"^15.1.2","vite":"^2.6.4"}}最后，我们需要添加electron的运行命令。//package.json{"name":"kuari","version":"0.0.0","main":"main.js","scripts":{"dev":"vite","build":"vitebuild","serve":"vitepreview","electron:serve":"electron."//添加},"dependencies":{"vue":"^3.2.16"},"devDependencies":{"@vitejs/plugin-vue":"^1.9.3","electron":"^15.1.2","vite":"^2.6.4"}}4.直接在终端中输入运行命令如下：yarnelectron:serve然后我们可以看到我们的桌面应用就出来了！5.最后，之前项目一直在使用VueCLIPluginElectronBuilder。这次有个项目要用electron开发，推一下看看。后面看情况，赶紧重新开发一个mac桌面应用。我只是尝了尝，但我一直没有机会尝试vite。Electron确实方便，但是打包的应用太大了，真是硬伤。这一次，目标受众首先是Windows用户，所以去电子吧！6.原博客地址Vite+Electron快速搭建VUE3桌面应用
