Vue+Vite+Tauri编写桌面程序

2023-06-13 本文已影响0人简单点的笨演员

Tauri 是一个开源的跨平台桌面应用程序开发框架，支持使用 Web 技术（如 HTML、CSS、JavaScript）和 Rust 编程语言编写本地桌面应用程序。它具有应用程序通用性高、体积小、性能强等特点，支持与现有 JavaScript 框架（如 React、Vue.js）及其生态系统相集成。Tauri 可以被用于开发各种类型的桌面应用程序，比如聊天客户端、音视频播放器、代码编辑器等，未来即将支持Android和IOS。

一、准备工作

Vue需要安装nodejs；
安装pnpm，nodejs包管理器，直接在命令行执行cargo install tauri-cli即可；
Tauri是用Rust编写的，需要安装Rust；
安装Tauri命令行工具，直接在命令行执行cargo install tauri-cli即可；
（可选，但是推荐）安装源代码编辑器VSCode ，和VSCode插件 Volar + Tauri + rust-analyzer

二、从Tauri自带模板开始

从模板创建tauri程序，在命令行执行：

# 这个只需执行一次
cargo install create-tauri-app

再执行cargo create-tauri-app命令，来创建 tauri app

F:\work>cargo create-tauri-app
✔ Project name · demo
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd demo
  pnpm install
  pnpm tauri dev

命令行在创建出来的demo目录（刚才填的Project name是目录名），执行 pnpm i 更新依赖。
继续执行命令，启动 Tauri 开发窗口 cargo tauri dev。第一次运行此命令时，Rust 包管理器需要几分钟来下载和构建所有必需的包。由于它们是缓存的，因此后续构建要快得多，因为只有新的代码需要重新构建。
一旦 Rust 完成构建，Web 视图就会打开，显示我们的 Web 应用程序。

未修改前的程序

尝试修改代码。打开 src/App.vue，修改其中的 “Welcome to Tauri!”为“欢迎使用Tauri！”，保存即可看到结果。

修改后的程序

打包发布App：cargo tauri build

三、遇到问题

打包发布时出现错误：

F:\rauri\demo>cargo tauri build
     Running beforeBuildCommand `pnpm build`

> demo@0.0.0 build F:\temp\rauri\demo
> vue-tsc --noEmit && vite build

vite v4.2.1 building for production...
✓ 21 modules transformed.
dist/index.html                  0.46 kB
dist/assets/vue-5532db34.svg     0.50 kB
dist/assets/index-9848b876.css   1.40 kB │ gzip:  0.66 kB
dist/assets/index-e82703d4.js   56.96 kB │ gzip: 22.97 kB
✓ built in 1.71s
   Compiling demo v0.0.0 (F:\temp\rauri\demo\src-tauri)
    Finished release [optimized] target(s) in 17.32s
        Info Verifying wix package
 Downloading https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip
       Error failed to bundle project: `Io Error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)`

这个错误的出现是因为，tauri打包的过程中，会下载一个依赖包，国内由于GitHub慢原因，导致下载失败。解决办法是直接通过迅雷下载这个zip文件，然后将解压后的文件放到C:\Users\当前用户名\AppData\Local\tauri\WixTools目录下，如果目录不存在需要手动创建对应的目录。
参考 juejin.cn/post/7183861675844436028

解决了这个错误后，还有类似的其他下载错误，下面是直接下载对应的目录：
https://github.com/tauri-apps/binary-releases/releases/download/nsis-3/nsis-3.zip => C:\Users\当前用户名\AppData\Local\tauri\NSIS
https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip => C:\Users\当前用户名\AppData\Local\tauri\NSIS\Plugins

Vue+Vite+Tauri编写桌面程序

一、准备工作

二、从Tauri自带模板开始

三、遇到问题

猜你喜欢

热点阅读