在Ubuntu22.04中构建Tauri App应用_ubuntu tauri-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44600038/article/details/131123135

该文章介绍了如何使用Tauri框架搭建开发环境，包括安装Rust、Node.js和必要的库，然后通过npm创建并初始化一个Tauri应用，使用Vue作为前端框架。接着，它详细阐述了构建和打包应用的过程，包括修改配置文件和生成deb及AppImage格式的可执行文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Tauri是一个开源的框架，用于构建跨平台的原生应用程序。Tauri能够将Web技术（例如JavaScript、HTML和CSS）与本地操作系统API结合起来，以创建高性能、安全、可靠和易于维护的桌面应用程序。

文章目录

环境搭建

oyal@localhost:~$ sudo apt update
oyal@localhost:~$ sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev
# 安装rust
oyal@localhost:~$ curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
# 刷新环境变量
oyal@localhost:~$ source "$HOME/.cargo/env"
# 查看rust版本
oyal@localhost:~$ rustc --version
rustc 1.69.0 (84c898d65 2023-04-16)
# 安装Node.js
oyal@localhost:~$ sudo apt install nodejs
# 查看Node.js版本
oyal@localhost:~$ node -v
v16.19.1
# 查看npm版本
oyal@localhost:~$ npm -v
8.19.3

快速开始

创建一个Tauri应用程序

oyal@localhost:~/Documents$ npm create tauri-app@latest
✔ Project name · tauri-demo # 项目名
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm) # 前端语言
✔ Choose your package manager · npm # 包管理器
✔ Choose your UI template · Vue - (https://vuejs.org) # 前端框架
✔ Choose your UI flavor · TypeScript # JavaScript/TypeScript

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

安装依赖

oyal@localhost:~/Documents$ cd tauri-demo/
oyal@localhost:~/Documents/tauri-demo$ npm install

开发

oyal@localhost:~/Documents/tauri-demo$ npm run tauri dev

构建

# 修改 tauri.config.json 中的默认包名 tauri.bundle.identifier
oyal@localhost:~/Documents/tauri-demo$ vim src-tauri/tauri.conf.json

- "identifier": "com.tauri.dev"
+ "identifier": "com.example"

oyal@localhost:~/Documents/tauri-demo$ npm run tauri build
......
Finished release [optimized] target(s) in 3m 44s
    Bundling tauri-demo_0.0.0_amd64.deb (/home/oyal/Documents/tauri-demo/src-tauri/target/release/bundle/deb/tauri-demo_0.0.0_amd64.deb)
    Bundling tauri-demo_0.0.0_amd64.AppImage (/home/oyal/Documents/tauri-demo/src-tauri/target/release/bundle/appimage/tauri-demo_0.0.0_amd64.AppImage)
    Finished 2 bundles at:
        /home/oyal/Documents/tauri-demo/src-tauri/target/release/bundle/deb/tauri-demo_0.0.0_amd64.deb
        /home/oyal/Documents/tauri-demo/src-tauri/target/release/bundle/appimage/tauri-demo_0.0.0_amd64.AppImage

# 查看打包后的 deb 文件
oyal@localhost:~/Documents/tauri-demo$ cd src-tauri/target/release/bundle/deb/
oyal@localhost:~/Documents/tauri-demo/src-tauri/target/release/bundle/deb$ ls
tauri-demo_0.0.0_amd64  tauri-demo_0.0.0_amd64.deb

安装应用

# 安装deb文件，默认安装在/usr/bin目录下
oyal@localhost:~$ sudo dpkg -i 文件名.deb
# 查看安装路径
oyal@localhost:~$ dpkg -L 应用名