前端桌面应用之-tauri

本文将结合 rustumi(ts)配置开发框架
gitee地址:https://gitee.com/rasir/ra-umi-tauri.git

nodejs 版本 10.x
tauri并非前端框架,而是一个rust框架。所以,要使用这个框架,还需要懂一定的rust开发。当然,如果你只需要将纯前端的代码进行打包,完全可以使用这个框架。

tauri-umi

安装umi

yarn create @umijs/umi-app
npm i

安装 rust 环境

参考
官网安装教程-Rust 编译工具

菜鸟教程

Rust 的编译工具依赖 C 语言的编译工具,这意味着你的电脑上至少已经存在一个 C 语言的编译环境。如果你使用的是 Linux 系统,往往已经具备了 GCC 或 clang。如果你使用的是 macOS,需要安装 Xcode。如果你是用的是 Windows 操作系统,你需要安装 Visual Studio 2013 或以上的环境(需要 C/C++ 支持)以使用 MSVC 或安装 MinGW + GCC 编译环境(Cygwin 还没有测试)。

  1. windows 环境
    Rust 编译工具推荐使用刚才从上方链接中下载的 Rustup 安装。下载好的 Rustup 在 Windows 上是一个可执行程序 rustup-init.exe。(在其他平台上应该是 rustup-init.sh )。
  1. mac 或 linux 在终端中执行 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
xxxx:tauri-umi xxx$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
info: downloading installer

Welcome to Rust!

This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.

Rustup metadata and toolchains will be installed into the Rustup
home directory, located at:

  /Users/xxx/.rustup

This can be modified with the RUSTUP_HOME environment variable.

The Cargo home directory located at:

  /Users/xxx/.cargo

This can be modified with the CARGO_HOME environment variable.

The cargo, rustc, rustup and other commands will be added to
Cargo's bin directory, located at:

  /Users/xxx/.cargo/bin

This path will then be added to your PATH environment variable by
modifying the profile files located at:

  /Users/xxx/.profile
  /Users/xxx/.bash_profile
  /Users/xxx/.zshenv

You can uninstall at any time with rustup self uninstall and
these changes will be reverted.

Current installation options:


   default host triple: x86_64-apple-darwin
     default toolchain: stable (default)
               profile: default
  modify PATH variable: yes

1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
>1

这里选1 default 就好


info: profile set to 'default'
info: default host triple is x86_64-apple-darwin
warning: Updating existing toolchain, profile choice will be ignored
info: syncing channel updates for 'stable-x86_64-apple-darwin'
info: default toolchain set to 'stable-x86_64-apple-darwin'

  stable-x86_64-apple-darwin unchanged - rustc 1.56.1 (59eed8a2a 2021-11-01)


Rust is installed now. Great!

To get started you may need to restart your current shell.
This would reload your PATH environment variable to include
Cargo's bin directory ($HOME/.cargo/bin).

To configure your current shell, run:
source $HOME/.cargo/env

在终端执行一下 source $HOME/.cargo/env
安装完成后,输入 rustc -V 查看rust版本信息输出
rust 包管理器是 cargo 输入 cargo -V查看版本输出

注意:使用vscode编辑rust时需要安装c/c++扩展才能正常启动调试器

全局安装tauri打包工具

cargo install tauri-bundler --force
在这个过程中可能会报某些包没有,不要慌,缺什么就安装什么

使用tauri

在直接在当前项目下 执行npm install tauri -S或者 yarn add tauri -S
完成后进行 初始化
npx tauri init
一样,初始化过程中,如果报错缺少什么模块,缺什么装什么。
执行完成,会自动生成一个 rust 项目 src-tauri

src-tauri/tauri.conf.json

"build": {
    "distDir": "../build", //打包后的路径
    "devPath": "http://localhost:8080", // 此为 dev 启动时的url
    "beforeDevCommand": "",
    "beforeBuildCommand": ""
  },

配置package.json

scripts:{
  ...
  "start": "concurrently \"npm run start:web\"  \"npm run start:tauri\"",
  "start:web": "umi dev",
  "start:tauri": "tauri dev",
  "build": "npm run build:web &&  npm run build:tauri",
  "build:web": "umi build",
  "build:tauri": "tauri build",
  ...
}

注意
所有依赖安装好了之后,先运行一次 npm run start:tauri。这时,cargo 会给 rust 项目安装依赖。过程会比较慢,有可能会因为网络问题导致安装失败,不要慌,多尝试几次。安装完成后。ctrl+c 推出,然后再使用 npm run start 一次性启动整个项目

tauri-umi.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351