用electron+vite+vue3搭建桌面端项目，electron基础配置一 点击公众关注号，“技术干货”及时达！「Electron 是基于 Chromium 和 Node.js 实现的」，前端程序员可以使用 JavaScript、HTML 和 CSS 知识快速构建跨平台的桌面应用。不需要本地开发原生的经验就在能在各PC端平台上运行的跨平台应用 windows、 macOS和Linux 笔者最近在学习Electron并且在用它工作，遇到了一些问题积累了一些浅薄的经验，在这里做一下记录，并且准备做一个桌面端的工具，打包运行到windows、 macOS和Linux上 创建项目使用vue3和vite创建vue的项目然后引入electron 先创建vue项目npmcreatevite@latestelectron-desktop-tool 进入到项目 执行安装和运行命令，可以看到vue项目已经启动起来了 cdelectron-desktop-tool npminstall npmrundev 项目可以在浏览器中跑起来，说明没毛病，下一步就在项目中引入 electron 目录结构这是目前的目录结构 安装electron在安装 electron之前需要先配置一下 安装源 在根目录下新建一个 .npmrc文件 strict-ssl=false registry=https://registry.npmmirror.com/ electron_mirror=https://registry.npmmirror.com/-/binary/electron/ electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/ #ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ strict-ssl=false：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题 registry=https://registry.npmmirror.com/：这是指定了 npm 的镜像源，用于下载 npm 包 electron_mirror=https://registry.npmmirror.com/-/binary/electron/：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件 安装electron相关插件接下来就可以进行安装electron和它相关的插件了 //进入到项目中安装electron npminstall-Delectron 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序 npminstall-Delectron-builder 安装electron-devtools-installer 用于开发调试electron npminstall-Delectron-devtools-installer 用vite构建electron应用程序需要一个vite插件 npminstall-Dvite-plugin-electron 创建项目入口——主进程electron引入成功了，可以开始写electron的相关代码了，新建一个src-electron 文件用来写electron的代码，在它下面创建一个 main.ts文件 用来写主进程代码 //src-electron/main.js const{app,BrowserWindow}=require('electron') const{join}=require('path') //屏蔽安全警告 //ectronSecurityWarning(InsecureContent-Security-Policy) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']='true' //创建浏览器窗口时，调用这个函数。 constcreateWindow=()={ constwin=newBrowserWindow({ width:800, height:600, }) //win.loadURL('http://localhost:3000') //development模式 if(process.env.VITE_DEV_SERVER_URL){ win.loadURL(process.env.VITE_DEV_SERVER_URL) //开启调试台 win.webContents.openDevTools() }else{ win.loadFile(join(__dirname,'../dist/index.html')) } } //Electron会在初始化后并准备 app.whenReady().then(()={ createWindow() app.on('activate',()={ if(BrowserWindow.getAllWindows().length===0)createWindow() }) }) app.on('window-all-closed',()={ if(process.platform!=='darwin')app.quit() }) 配置插件入口在「vite.config.ts」中配置vite-plugin-electron 插件入口 import{defineConfig}from'vite' importvuefrom'@vitejs/plugin-vue' importelectronfrom'vite-plugin-electron' //https://vitejs.dev/config/ exportdefaultdefineConfig({ plugins:[ vue(), electron({ //主进程入口文件 entry:'./src-electron/main.js' }) ], /*开发服务器选项*/ server:{ //端口 port:3000, } }) 配置package.json在package.json把"type": "module", 删除掉并且配置main字段 //main字段配置为electron主进程文件路径 "main":"./src-electron/main.js", electron 启动运行 npm run dev 启动项目 可以看到弹出一个 electron窗口，这样一个最基本的electron应用就写好了 修改标题和logo「修改标题」 electron窗口左上角的标题，首先读取的是 index.html 的title标签值 此时把他注释掉 如果在主进程中没有配title属性，就会读取package.json 文件里的 name属性 在主进程 new BrowserWindow时，可以自定义窗口标题 constwin=newBrowserWindow({ width:800, height:600, title:'董员外' }) 「修改图标」 窗口图标和任务栏图标默认是electron 的logo 窗口图标是在 new BrowserWindow 初始化窗口实例时配置，和标题是一起的 const{join}=require('path') constwin=newBrowserWindow({ width:800, height:600, title:'董员外', icon:join(__dirname,'../public/logo.ico'), }) join是引入的path路径方法__dirname是当前文件的路径，我们的main.js是在 src-electron文件夹下，所以找图片是需要返回到上一级目录../public/logo.ico 打包打包插件和用到的包我们在第一步都已经安装了，但是还要配置一些打包的参数 配置 package.json首先配置一下打包的命令,在"scripts"里面配置这个打包命令 "electron:build":"vitebuildelectron-builder" 添加一个 build属性对象,里面主要配置打包的信息 "build":{ "productName":"ElectronDeskTopTool", "appId":"dyy.dongyuanwai", "copyright":"dyy.dongyuanwai?2024", "compression":"maximum", "asar":true, "directories":{ "output":"release/"//输出目录 }, "nsis":{ "oneClick":false,//是否一键安装 "allowToChangeInstallationDirectory":true,//允许修改安装目录 "perMachine":true, "deleteAppDataOnUninstall":true, "createDesktopShortcut":true,//创建桌面图标 "createStartMenuShortcut":true,//创建开始菜单图标 "shortcutName":"ElectronDeskTopTool" }, "win":{ "icon":"./public/logo.ico",//安装图标 "artifactName":"${productName}-v${version}-${platform}-setup.${ext}",//安装包名称 "target":[ { "target":"nsis" } ] }, "mac":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}" }, "linux":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}" } }, 配置主线程打包加载文件 用 process.env.VITE_DEV_SERVER_URL来判断是否是开发模式 打完包之后就会加载index.html文件 这是完整的package.json文件内容 { "name":"electron-desktop-tool", "private":true, "version":"0.0.0", "main":"./src-electron/main.js", "scripts":{ "dev":"vite", "build":"vue-tscvitebuild", "preview":"vitepreview", "electron:build":"vitebuildelectron-builder" }, "build":{ "productName":"ElectronDeskTopTool", "appId":"dyy.dongyuanwai", "copyright":"dyy.dongyuanwai?2024", "compression":"maximum", "asar":true, "directories":{ "output":"release/" }, "nsis":{ "oneClick":false, "allowToChangeInstallationDirectory":true, "perMachine":true, "deleteAppDataOnUninstall":true, "createDesktopShortcut":true, "createStartMenuShortcut":true, "shortcutName":"ElectronDeskTopTool" }, "win":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}", "target":[ { "target":"nsis" } ] }, "mac":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}" }, "linux":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}" } }, "dependencies":{ "vue":"^3.4.21" }, "devDependencies":{ "@vitejs/plugin-vue":"^5.0.4", "electron":"^30.0.0", "electron-builder":"^24.13.3", "electron-devtools-installer":"^3.2.0", "typescript":"^5.2.2", "vite":"^5.2.0", "vite-plugin-electron":"^0.28.4", "vue-tsc":"^2.0.6" } } win打包npmrunelectron:build 可以看到打包成功，并且生成了一个 指定的打包文件输出目录 release目录下有安装包 设置了allowToChangeInstallationDirectory就可以自定义安装目录 设置createDesktopShortcut安装成功后就可以看到，在桌面上生成了快捷方式 到这里已经算成功了，接下来大概了解一下build打包配置，可以详细的了解一下打包结果的设置 build相关配置//打包的配置都放到build里 "build":{ "productName":"ElectronDeskTopTool",//项目名这也是生成的exe文件的前缀名，也可以在每个环境中自行配置 "appId":"com.dyy.dongyuanwai",//应用程序的唯一标识符，通常是反转的域名格式 "copyright":"dyy.dongyuanwai?2024",//版权信息，显示在应用程序中说明版权归属的地方 "compression":"maximum",//压缩级别，指定打包时使用的压缩级别。这里设置为"maximum"表示最大压缩 "asar":true,//是否启用 asar 打包，asar 是 Electron 提供的一种文件打包方式，能够提高应用程序的性能和安全性。 "directories":{//指定输出目录，打包完成后的文件会放置在该目录下。 "output":"release" }, //windows相关的配置 "win":{ "icon":"xxx/icon.ico",//图标路径 "artifactName":"${productName}-v${version}-${platform}-setup.${ext}"//安装包名称 }， //这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。 "arch":[ "x64", "ia32" ] } nsis配置NSIS（Nullsoft Scriptable Install System）打包是为了生成 Windows 平台的安装程序。 "nsis":{ "oneClick":false,//是否一键安装 "perMachine":true,//设置为 true 时，将在计算机上所有用户账户中安装应用程序；false 则只会在当前用户账户下安装 "allowElevation":true,//允许提升权限进行安装，设置为true时，安装过程可能会请求管理员权限 "allowToChangeInstallationDirectory":true,//允许修改安装目录 "installerIcon":"xxx/xxxx.ico",//安装图标 "uninstallerIcon":"xxx/xxxx.ico",//卸载图标 "installerHeaderIcon":"xxx/xxxx.ico",//安装时头部图标 "deleteAppDataOnUninstall":true,//设置为true时，卸载应用程序时会删除应用程序的数据文件 "createDesktopShortcut":true,//创建桌面图标 "createStartMenuShortcut":true,//创建开始菜单图标 "shortcutName":"xxxx",//图标名称 }, linux 打包electron-builder 打包会自动识别环境，所以我在linux环境也可以直接运行 npm run electron:build,他就会打成linux的包 linux环境会打成.deb格式，所以要在package.json 的linux里面配置 "linux":{ "icon":"./public/logo.ico", "artifactName":"${productName}-v${version}-${platform}-setup.${ext}", "target":["deb"] } 解决linux打包报错运行打包命令就会发现这样的报错： ?? Please specify project homepage, see https://electron.build/configuration/configuration#Metadata-homepa Please specify author 'email' in the application package.json ?这是因为package.json文件内容 homepage、auth、email这些字段没有配置 配置路由虽然是electron客户端里的路由，但是配置还是和vue的路由一样 「1、安装路由：」 npminstallvue-router@4 添加路由页面：在src目录下新建一个 page文件夹 里面存放页面 「2、新建 first页面和second页面」 /page/first/index.vue template h1 这是first页面 /h1 button@click="go"去second页面/button /template scriptsetuplang="ts" import{useRouter}from'vue-router'; constrouter=useRouter() constgo=()={ router.push('/second'); }; /script stylescoped /style /page/second/index.vue template h1 这是second页面 /h1 button@click="go"去first页面/button /template scriptsetuplang="ts" import{useRouter}from'vue-router'; constrouter=useRouter() constgo=()={ router.push('/'); }; /script stylescoped /style 「3、配置路由表」 在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由 //src\router\index.ts import{createRouter,createWebHashHistory}from'vue-router' constrouter=createRouter({ // hash 模式。 history:createWebHashHistory(), routes:[ //设置首页 { path:'/', component:()=import('../page/first/index.vue') }, { path:'/second', component:()=import('../page/second/index.vue') }, ], }) exportdefaultrouter 文件目录结构如下： 「4、src下的main.ts中use路由」 import{createApp}from'vue' import'./style.css' importAppfrom'./App.vue' importrouterfrom'./router' createApp(App).use(router).mount('#app') 「5、在App.vue文件删除原来的内容，添加router-view」 scriptsetuplang="ts" /script template router-view/router-view /template stylescoped /style 启动运行 看看最后的效果 最后后续还会继续更新~ ipc进程通信，linux、macOS打包等等 所有代码都会更新到github: electron-desktop-tool 点击公众关注号，“技术干货”及时达！ 阅读原文