用Tauri2.0把Vite+Vue3项目打包成exe桌面程序使用Tauri2.0把Vite+Vue3项目打包成exe桌

前言

最近有个需求是做一两个设备的配置页面，但需要在断网的笔记本上直接运行（笔记本用网线直连设备）。避免测试同事配置开发环境麻烦，想到了把这些前端配置页面打包成一个exe的安装包。到时候测试同事只需要双击运行安装，打开后就可以直接运行，比较方便。

有这个打包需求后，首先想到的是Electron，之前也是有了解过。但在这次的开发过程中出现了非常大的问题，导致我重装了两次系统😭被迫放弃了。然后转向了Tauri，看到Tauri推出了2.0的版本，也正好尝试一波。

一开始用Electron-builder打包的过程中，它打包的过程中会有报错。后面用管理员权限运行命令行后，打包就没有报错，直接成功。双击打包后的程序进行安装，安装完成后，会发现系统内所有的快捷方式、所有的exe程序打开都是我这个新开发的程序。打开cmd是它，打开注册表也是它，打开任何一个exe程序都是它。和IT同事搞了很久没法修复，只能重装系统。第一次出现的时候我没有意识到问题的严重性，我想着再尝试一遍，看下哪里出了问题。结果...，只能第二次重装系统。

Tauri介绍

引用自官网

Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成 HTML、JavaScript 和 CSS 的前端框架，同时可以在必要时使用 Rust、Swift 和 Kotlin 等语言编写后端逻辑。

对于开发者而言，Tauri 有三个主要优势：

构建应用所需的可靠基础（利用 Rust 提供的内存、线程和类型安全方面的优势）

使用系统原生 webview（网页视图）带来的更小打包体积，不需要在每个应用中都打包一个浏览器引擎

使用任何前端技术和多种语言绑定带来的灵活性

环境准备

前端项目

我是先有的一个Vue3的前端项目，所以这一块我直接是现成的。就是正常的Vue3+TS+ElementPlus的环境。

Tauri前置要求

我开发的是Windows的桌面程序，这里只讲下Windows的要求，其它系统可以查看官方文档。

安装Microsoft C++ 构建工具

Tauri 使用 Microsoft C++ 构建工具进行开发以及 Microsoft Edge WebView2。这些都是在 Windows 上进行开发所必需的。

下载 Microsoft C++ 构建工具安装程序并打开它以开始安装。
在安装过程中，选中“使用 C++ 进行桌面开发”选项。

WebView2

WebView 2 已安装在 Windows 10（从版本 1803 开始）和更高版本的 Windows 上。我的电脑是win10的，所以这一步可以跳过。

如果有需要的话，可以通过访问 WebView2 Runtime 下载区安装 WebView2。下载“常青版独立安装程序（Evergreen Boostrapper）”并安装它。

Rust

在安装这个之前，如果没有安装第一步的Microsoft C++ 构建工具会有提示。尽量按顺序安装。

Tauri 使用 Rust 构建并需要它进行开发。可以在 www.rust-lang.org/tools/insta… 下载 rustup。下载之后双击运行，一路下一步就行。

到这里系统环境就准备好了。接下来要在项目里面安装Tauri依赖了。

NPM依赖安装

在项目内安装tauri-apps/cli

npm install -D @tauri-apps/cli@latest

修改Vite.config.js配置

下面的配置可以根据自己项目配置情况添加。

import { defineConfig } from 'vite';

export default defineConfig({
  // ...其它
  // 防止 Vite 清除 Rust 显示的错误
  clearScreen: false,
  server: {
    // Tauri 工作于固定端口，如果端口不可用则报错
    strictPort: true,
    // 如果设置了 host，Tauri 则会使用
    host: host || false,
    port: 5173,
  },
  // 添加有关当前构建目标的额外前缀，使这些 CLI 设置的 Tauri 环境变量可以在客户端代码中访问
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    // Tauri 在 Windows 上使用 Chromium，在 macOS 和 Linux 上使用 WebKit
    target:
      process.env.TAURI_ENV_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',
    // 在 debug 构建中不使用 minify
    minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
    // 在 debug 构建中生成 sourcemap
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

初始化项目内tauri

在项目根目录运行：

npx tauri init

在过程中，会需要输入一些选项：

// 应用名称，它默认会去读package.json里面的name，不改的话可以直接回车
✔ What is your app name? tauri-app
// 应用窗口上的名称，默认也是name，按自己需求修改
✔ What should the window title be? tauri-app
// Vite打包后的静态资源位置，默认../dist，可以直接回车
✔ Where are your web assets located? ..
// 本地启动Vite开发服务url
✔ What is the url of your dev server? http://localhost:5173
// 启动前端开发环境命令，默认 npm run dev
✔ What is your frontend dev command? npm run dev
// 前端构建命令，默认npm run build
✔ What is your frontend build command? npm run build

这些配置都可以直接先回车，后续在配置文件tauri.conf.json中还可以手动修改。

最后两项要确认正确，在tauri启动开发服务和打包前，是会先运行Vue项目的对应命令的。

初始化完成后，会自动生成src-tauri的目录，配置文件就在其中。

启动调试环境

上面都初始化成功后，可以试着启动调试服务，检验环境是否配置成功。

// 这里是npx
npx tauri dev

第一次运行的话会比较慢，tauri会下载很多依赖。等待一会，成功的话，会直接打开一个应用程序窗口，里面就是首页的内容了。

Tauri配置

我这里列一下刚才在初始化时说的可以手动修改配置对应的字段名称。

{
  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
  // app名称
  "productName": "SGA100 Setup",
  // 版本号
  "version": "0.4.0",
  // 标识，这里需要修改一下，才能正常构建
  "identifier": "com.upper.computer",
  "build": {
     // Vite打包后静态资源位置
    "frontendDist": "../dist",
    // 前端开发环境url
    "devUrl": "http://localhost:5175",
    // 开发和构建运行命令
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        // 应用打开后，窗口名称
        "title": "诱骗项目上位机",
        // 默认窗口大小
        "width": 900,
        "height": 800,
        // 是否可以调整大小
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "longDescription": "SGA100 Setup",
    "shortDescription": "SGA100 Setup",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

👉其中有个要注意的地方， identifier 在构建前必须修改一下，不允许重复。不然构建的时候会提示你identifier重复。

调试&构建

构建的话，运行

npx tauri build

在windows平台的话，默认打包出来的就是exe。第一次打包也会稍微慢点。

最后打包完成，安装包在 src-tauri\target\release\bundle 路径下。两种格式的安装包都是一样的。

使用感受

这次使用的过程非常顺利，按照官方文档的教程，一路配置下来基本上没遇到啥问题，就构建成功了。这次只是简单打包两个前端页面，不涉及什么复杂原生功能，所以对之前前端代码也没有任何调整，感觉十分方便。
免不了要比较下Electron和Tauri。抛开这次的重大问题来说（我也不知道是原因导致的），最直观的体验是：
1. Electron只需要安装npm的依赖包，不需要安装其他环境和构建工具，相对来说说配置简单一些；Tauri因为依赖Rust和Microsoft C++构建工具，配置环节稍微复杂点，但也还好，都是一路安装就行，不太需要多注意。
2. 同样的一个Vue项目，Electron打包出来的安装包有80M+，Tauri打包出来的之有2M左右。差别很大，毕竟他们底层实现逻辑不一样。也没必要比较孰优孰劣，按自己需求选择就好。

上方两个SGA100 Setup是Tauri打包出来的。下面UpperWeb Setup是Electron打包出来的。（名称不一样是因为后来改了名字，但是都是同一个Vue项目打包出来的）。

这次也只是浅尝辄止，没用到更多的功能，也没打包移动端的应用。更多的功能留待以后体验。

参考文档

Tauri官网教程

用Tauri2.0把Vite+Vue3项目打包成exe桌面程序

前言

Tauri介绍

环境准备

前端项目

Tauri前置要求

安装Microsoft C++ 构建工具

WebView2

Rust

NPM依赖安装

Tauri配置

调试&构建

使用感受

参考文档