自定义electron安装界面之setuply

前言

Electron作为一个基于JavaScript、HTML 和 CSS 构建桌面应用程序的框架，被前端开发者广泛应用于开发windows应用，但因NSIS打包后无法高度自定义安装界面，导致我们开发的应用总是像缺失了一角。

不完美的解决方案

用electron单独再写一个安装程序

electron因为在打包时会自带Chromium 和 Node.js，导致包体积非常大，显然作为我们的安装程序是不合适的

完美解决方案

我们似乎记得隔壁Tauri的优势就是构建体积小、性能高的windows应用，ok，取“敌人之长，补自身之短”，完美！

但是Tauri是基于Rust的，学习曲线很陡，但是好在社区已有开源框架setuply能够快速的开发Tauri应用，无需写Rust，只需用网页开发就能够快速构建体积小、性能高的windows应用。

setuply使用

详细使用访问setuply

使用前准备

安装Rust和>=22.12.0的NodeJs

创建模板

npx create-setuply

选择自己需要的模板

按照提示安装依赖

cd setuply-project
npm install

启动应用进行开发（以React为例）

npm run dev:win

初始是一个可运行的demo，默认提供了组件、Hooks和一些常用的api，只需要按照开发React应用的方式开发UI界面即可

打包应用

npm run build:win

打包后的文件：

Tauri使用的是本机的webview2，使用时请确认环境，如无法确认请使用带安装程序的版本

• 带安装程序的应用路径：

${your project}\src-tauri\target\i686-pc-windows-msvc\release\bundle\nsis\setuply_installer_1.0.0_x86-setup.exe

• portable应用地址：

${your project}\src-tauri\target\i686-pc-windows-msvc\release\setuply_installer.exe