Flutter、Electron、Tauri框架对比及Electron+Vue项目实战

Flutter、Electron、Tauri框架对比及Electron+Vue项目实战

随着移动互联网和桌面应用的快速发展，开发者们越来越倾向于使用跨平台框架来提高开发效率和降低成本。Flutter、Electron和Tauri作为当前最受欢迎的几种跨平台框架，各自拥有独特的优势和应用场景。本文旨在深入探讨这三种框架的特点、优缺点，并分享一个基于Electron+Vue的项目实战经验。

背景

XXXX团队：我们想在断网环境下通过 RuntimeAI 运行 Python 程序，给用户输出日志、执行结果等需求的桌面端程序。
我：好的，上菜。

三大框架对比

Flutter简介

Flutter是Google推出的开源UI软件开发工具包，用于构建在iOS、Android、Web和桌面端高质量的原生界面。Flutter的一大特点是其“一次编写，处处运行”的能力，极大地提高了开发效率。Flutter使用Dart语言，拥有丰富的组件库和良好的性能。

Electron简介

Electron是一个使用JavaScript、HTML和CSS构建桌面应用的框架，由GitHub开发。它允许开发者将Web技术用于桌面软件的开发，使得原本只能在网络浏览器中运行的应用能够被作为独立的桌面应用来分发和安装。Electron应用本质上是Chromium浏览器的变种，这意味着它相对较重，但开发速度快，易于上手。

Tauri简介

Tauri 是一个相对较新的框架，旨在提供一个安全、轻量级的平台，用于将Web技术包装成桌面应用。与Electron相比，Tauri的最大优势在于其对安全性的强调以及更小的应用体积。Tauri应用使用Rust语言进行系统调用，提供了更好的性能和更低的资源消耗。

特点	Flutter	Electron	Tauri
开发语言	Dart	JavaScript, HTML, CSS	JavaScript, HTML, CSS
跨平台	移动、Web和桌面应用开发	桌面应用开发	桌面应用开发
性能	高（Flutter直接编译到机器代码，减少了桥接层）	中（基于Chromium和Node.js，可能占用更多资源）	高（生成的应用体积小，性能优化）
用户界面	丰富的UI组件库，可高度自定义	使用Web技术构建UI，灵活	使用Web技术构建UI，灵活
应用体积	小	较大（包含Chromium和Node.js）	中
安全性	依赖于框架本身和开发实践	依赖于框架本身和开发实践，可能需要注意Web安全问题	高（Rust的安全性优势）
适用场景	适合需要高性能和高度定制UI的跨平台应用	适合希望快速将Web应用转为桌面应用的项目	适合对应用体积和性能有严格要求，注重安全的桌面应用开发
社区支持	强	强	弱
GitHub Star	161k	111k	75.5k

数据对比

根据三大框架官方文档，安装了开发和构建依赖、配置环境变量和成功启动后，我将通过启动速度、目录结构、打包体积做真实对比。

统一开发IDE为 VS Code

1. 启动速度：Electron > Tauri > Flutter

启动速度只做大概预估，因为跟机器性能、网速和Tauri是否有新的依赖需要更新有关。

2. 目录结构：Electron 、Tauri > Flutter

3. 打包体积：Flutter > Tauri > Electron

框架选择

基于以上对比数据，我选择Electron，理由是：

1. 开发难度小
2. 安装依赖方便
3. 更加适合本次需求
4. VS Code也是利用Electron开发
5. 社区庞大

Electron+Vue3项目实战基础版)

如果安装 electron、electron-builder和打包出错。中心思想就是自己下载好所需依赖，放至对应目录下。

搭建Electron应用参考文章，部分需要做修改。

1. 项目初始化

首先，按照 Vue 官网步骤创建一个Vite+Vue+Ts项目：

npm create vue@latest
cd my-project
code .
npm install

2. 添加Electron依赖：

npm install electron vite-plugin-electron -D

3. 修改package.json

dist-electron：vite-plugin-electron插件运行后，会将electron主进程文件编译到dist-electron/index.js

chcp 65001：解决中文乱码

去掉 “type”: “module”

"main": "dist-electron/index.js"
"scripts": {
   
  "dev": "chcp 65001 && vite"
  ...
}

4. 配置vite.config.ts

import {
    fileURLToPath, URL } from 'node:url'

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
   
  plugins: [
    vue(),
    electron({
   
      entry: "electron/index.ts"
    })
  ]
})

5. 创建 electron/index.ts 主进程文件

import {
    app, Br