Vue打包Win10可执行程序

最新推荐文章于 2025-06-09 09:45:31 发布

一刻不闲人

最新推荐文章于 2025-06-09 09:45:31 发布

阅读量1.8k

点赞数 41

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liumeng248/article/details/143021070

Vue打包Win10可执行程序

最近在思考如何将Vue项目打包成Win10可执行的exe程序，点击即可用。方便快捷。

百度后查到了跨平台桌面应用开发框架

跨平台应用开发框架是开发人员可以使用一套相同的代码，一次性地编码便可在多个端侧平台上运行（如：小程序、浏览器、iOS、Andriod、MacOS、Linux、麒麟、UOS.....）。它最大的作用是极大降低了开发人员的开发周期，进而实现快速交付。

跨平台应用程序开发框架的好处：一套代码适用多个设备、多个平台、多个应用商店中发布、快速成型、快速开发、无缝产品维护。

一、跨平台应用程序开发框架

1、Electron —— 跨平台桌面应用开发框架

Electron 是一个使用 Java、HTML 和 CSS 构建跨平台桌面应用程序的框架。它通过使用 Node.js（作为后端）和 Chromium 的渲染引擎（作为前端）完成跨平台的桌面 GUI 应用程序的开发。Electron 现已被多个开源 Web 应用程序用于前端与后端的开发，著名项目包括 Atom 和 Visual Studio Code。Electron 兼容 Mac、Windows 和 Linux，可以构建同时支持三个平台的应用程序。

2、Tauri —— 桌面应用程序开发框架

Tauri 是一个桌面 UI 框架，可让开发者使用每个平台的 Webview 技术栈为所有主要桌面操作系统构建应用程序，目前支持 Windows/macOS/Linux 等平台。开发者通过 Tauri 几乎可以使用任何编译为 HTML、JS 和 CSS 的前端框架来构建桌面 UI。Tauri 核心库采用 Rust 编写，使用 Tauri 开发的应用程序的后端是一个基于 Rust 的二进制文件，带有一个前端可以与之交互的 API，通过 JS Api 调用后台接口。

3、Gluon.js —— 桌面应用开发框架

Gluon 是用于开发桌面应用的框架，基于系统已安装的浏览器（非 webviews）和 Node.js 进行构建，可作为 Electron 的替代方案。和常见的桌面开发框架不同，Gluon 没有内置浏览器内核（如 Chromium）或使用 webview（如 Windows 上的 Edge Webview2），而是使用系统已安装的浏览器，如 Chrome、Edge、Firefox 等。Gluon 基于 Chromium 和 Firefox 的浏览器作为前端，后端则使用了 Node.js。

运行示例

4、Neutralinojs —— 轻量级桌面应用开发框架

Neutralinojs 是一个轻量级、便携的桌面应用程序开发框架。开发者通过它能够使用 Java、HTML 和 CSS 开发轻量级跨平台桌面应用程序。使用 Neutralinojs 构建的应用程序可以在 Linux、macOS、Windows 和 Web 上运行。

5、NW.js —— 使用 Web 技术构建桌面应用程序

NW.js 此前称为 Node Webkit，支持从 DOM 调用所有 Node.js 模块，融合了 Node.js 和 Webkit HTML 渲染器来运行本地应用，实现了用所有 Web 技术编写应用程序的新方式。

6、Vuido —— 用 Vue.js 构建跨平台原生桌面应用

Vuido 让使用 Vue.js 构建轻量级原生桌面应用成为可能。使用 Vuido 构建的应用可在 Windows、OS X 和 Linux 上运行，使用原生 GUI 组件，并且不依赖 Electron。

7、Flutter Desktop Embedding —— 使用 Flutter 开发跨平台桌面应用

Flutter Desktop Embedding 是谷歌官方推出的一个兼容库，可将 Flutter 框架的 API 用于开发跨平台的桌面应用。该项目旨在支持在 Windows，macOS 和 Linux 上构建使用 Flutter 开发的应用程序。

8、vgtk —— Rust 实现的桌面 UI 框架

vgtk 是 Rust 编写的声明式桌面 UI 框架，内置了 GTK 和 Gtk-rs，完全跨平台，具有适用于 Linux、Windows 和 macOS 的原生外观。

9、Iced —— 跨平台的 Rust GUI 库

Iced 是一个跨平台的 Rust GUI ，专注于简单性和类型安全；灵感来自于 Elm，支持 Windows、macOS、Linux 和 Web 平台，目前处于实验性阶段。

10、Azul GUI —— Rust 和 C++ 编写的桌面 GUI 框架

Azul 是一个使用 Rust 和 C/C++ 编写的跨平台 GUI 框架，使用 WebRender 渲染引擎和 CSS/HTML-like DOM 构建，可用于开发漂亮的原生桌面应用程序。

11、Dear PyGui (DPG) —— Python 现代 GUI 框架

Dear PyGui 是一个易于使用、动态、GPU 加速、跨平台的 Python 图形用户界面工具包 (GUI)，支持 Windows、Linux、macOS。

12、electron-egg —— 跨平台桌面软件开发框架

electron-egg 是入门简单、跨平台、企业级的桌面软件开发框架。只需一套代码，即可打包成支持 Windows、Mac、Linux、国产UOS、Deepin、麒麟等平台的版本。

13、Qt —— 跨平台的 C++ 应用和 UI 开发框架

Qt 是一个跨平台的 C++ 应用程序开发框架，被广泛用于开发 GUI 程序，支持的平台包括 Windows、GNU/Linux、Mac OS X、Android、iOS、WinCE、Unix 家族等。

14、GTK —— GUI 开发工具包

GTK (GIMP Toolkit) 是一套跨多平台的图形工具包，最初是 GIMP 的专用开发库 (GIMP Toolkit)，后来发展为 Linux 下开发图形界面应用程序的主流开发工具之一。

15、.NET MAUI —— .NET 跨平台 UI 框架

.NET MAUI 是 .NET 的多平台 App UI，用于构建支持移动设备、平板和桌面的原生应用程序的框架。提供支持多平台的原生 UI、可部署到跨移动和桌面的多设备上。

16、WPF —— 用于构建 Windows 桌面应用程序的 UI 框架

WPF (Windows Presentation Foundation) 是微软推出的用于构建桌面客户端应用程序的 UI 框架，具有应用程序模型、控件、图形、布局、数据绑定和安全性等功能，属于 .NET Framework 3.0 的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。WPF 的核心是一个利用现代图形硬件的渲染引擎。

17、WinUI —— Windows UI 库

Windows UI 库 (WinUI) 是适用于 Windows 桌面和 UWP 应用程序的原生用户体验 (UX) 框架。

18、GuiLite —— 超轻量 UI 框架

GuiLite 是 4 千行的图形界面库，可以运行在所有平台（例如：iOS/macOS/WathOS，Android，Linux（ARM/x86-64），Windows（包含 VR），Docker 和 MCU）上；也可以与多种语言（例如：Swift, Java, Java, C#, Golang）协同工作。

19、Capy —— Zig 编写的声明式 UI 库

Capy 是采用 Zig 构建的真正原生 GUI 的跨平台库，支持 Windows、Linux 和 Web。目前，Capy 尚在积极开发中，还没有准备好应用于生产。

20、AWTK —— 开源 GUI 引擎

AWTK 全称 Toolkit AnyWhere，是 ZLG 开发的开源 GUI 引擎，旨在为嵌入式系统、WEB、各种小程序、手机和 PC 打造的通用 GUI 引擎，为用户提供一个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的 GUI 引擎。

二、Electron和Tauri使用和对比

只使用过Electron和Tauri。

Electron

首先，Electron 本身是基于 Node.js 的，这样就可以利用 Node.js 的现成资源。其次，Electron 是跨平台的，换句话说，它可以同时开发 Web 应用和桌面应用，一些常规的资源，如：UI，代码（JS）等资源都可以共享，为开发者大大减少了工作量，甚至企业也无需重复投入人力来开发系统。再有，Electron 不仅支持 Web API，完成与 Web 应用相同的工作，还允许调用很多操作系统底层 API 来与硬件设备交互，甚至可以用 C++、Go 来编写本地模块，这样一来就可以完成很多 Web 应用无法做到的事情。

小结：使用语言html，js，css等，功能强大，界面绚丽，跨平台，开发成本低，可以说是集优点于一身。除了，性能不敢恭维~~

Tauri框架

从Tauri官网的宣传语可以看出Tauri主打的几个卖点：

optimized：性能高、体积小
secure：安全性强
frontend-independent：前端独立
multiplatform：跨平台

Tauri框架是由Rust语言实现的，同时Tauri应用的后端也是由Rust来编写的。Rust是由Mozilla主导开发的通用、编译型的系统编程语言。Rust语言自身有如下的一些特性：

性能高（optimized）：Rust的性能和C/C++的性能不相上下，由于Rust的「所有权」机制，Rust不需要GC，同时也能避免如C/C++之类需要手动管理内存的语言忘记释放内存导致的内存泄露的问题；
安全性强（secure）：Rust设计了一个所有权系统，其中所有值都有一个唯一的所有者，并且值的作用域与所有者的作用域相同。值可以通过不可变引用（&T）、可变引用（&mut T）或者通过值本身（T）传递。任何时候，一个变量都可以有多个不可变引用或一个可变引用，这实际上是一个显式的读写锁。Rust编译器在编译时强制执行这些规则，并检查所有引用是否有效。能够有效避免C/C++等语言中的悬垂指针等问题；
FFI编译友好（multiplatform）：FFI是可以用一种编程语言写的程序能调用另一种编程语言写的代码的机制，使用Rust可以方便地提供接口给其他语言调用；

Rust语言的一些特性，也增强了Tauri框架的可靠性和框架价值。此外，hello word打包后果然只有10m，而且开发还是能用html+css技术，效率非常高。

两者对比：

环境配置角度：Electron，简单。Tauri安装环境配置相对繁琐。
开发打包步骤：Electron，简单、快。Tauri时间稍长。
打包后的程序：Electron包体积大，执行程序费事。Tauri简单，体积小，两者体积大小相差十几倍。

三、Election使用

1、安装Node、Vue等环境

2、使用脚手架创建

Electron 应用程序遵循与其他 Node.js 项目相同的结构。首先创建一个文件夹并初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init
或
mkdir my-electron-app && cd my-electron-app
yarn init

init初始化命令会提示您在项目初始化配置中设置一些值为本教程的目的，有几条规则需要遵循：

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。

你的 package.json 文件应该像这样：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

然后，将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron
或
yarn add --dev electron

注意：如果您在安装 Electron 时遇到任何问题，请参见高级安装指南。

最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

{
  "scripts": {
    "start": "electron ."
  }
}

start命令能让您在开发模式下打开您的应用

npm start
或
yarn start

3、打包Vue项目，复制dist到my-electron-app项目根目录

4、修改了Electron 项目my-electron-app的index.html文件的路径

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
#改之前
  win.loadFile('index.html')
  #改之后
  win.loadFile('./dist/index.html')
}

启动查看效果

npm start
或
yarn start

5、打包

最快捷的打包方式是使用 Electron Forge。

将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：

npm添加

npm install --save-dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

或yarn添加

yarn add --dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

或

yarn make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

修改exe程序图标：

修改Vue项目index.html即可

最后总结：

打包后的程序过大