Rust Tauri "Hello World"


Rust Tauri “Hello World”

本文介绍如何在 linux 系统上运行第一个 tauri 应用。

js 开发人员应当可以直接参考官方文档跑通程序。本文旨在为不熟悉此类开发的人士梳理开发流程。

什么是 tauri

用一句话回答:tauri 是 electron 的替代品。目前它已经可以做到比 electron 更好。

Hello World

接下来,来看如何使用 tauri 框架。

环境配置

根据官方文档

在 linux 下使用 tauri 需要 webkit library、nodejs runtime 以及 rust 环境的支持。

以下默认以 yarn 作为 js 包管理器。

这部分可以参考文档解决。另外记得给 yarn 和 cargo 换源。

初始化项目

  1. yarn init

一切默认即可。

  1. yarn add @tauri-apps/cli

在当前项目目录添加 tauri 可执行程序及其依赖。

为了方便使用,在package.json中设置如下内容。

"scripts": {
  "tauri": "tauri"
}

设置完成之后就可以使用yarn tauri命令代替tauri.js

  1. yarn tauri init

初始化 tauri 项目,设置相应信息。

Where are your web assets (HTML/CSS/JS) located指的是存放 html、css、js 文件的目录,可以设置为../dist

What is the url of your dev server指的是开发服务器的 url。所谓开发服务器,就是开发过程中使用的显示、调试等工具的集合。这里先将其设置为http://localhost:8080

  1. yarn tauri info

查看一下刚才设置的信息。

  1. yarn tauri dev

编译项目并运行。

如果你在上面的步骤中因为网络问题而中断操作,很有可能在这一步出现报错。最快的解决方案只需简单粗暴的重头再来。

这时,你会发现项目编译完成并运行,但是显示could not connect to server

这是因为没有启动开发服务器。

  1. yarn add webpack-dev-server

安装开发服务器。

package.json文件中设置如下。

"scripts": {
  "tauri": "tauri",
  "dev": "webpack serve"
}

继续安装yarn add webpack

这时可以使用yarn dev来启动开发服务器。

此时,你又会发现有报错。这是因为没有配置开发服务器。

  1. 配置开发服务器

在项目根目录下新建webpack.config.js。写入以下内容。

const path = require("path");
module.exports = {
  entry: path.join(__dirname, "src/js/index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
};

这里只是简单的配置。更多配置可以参考该服务器的文档。

以上配置应当容易理解,只是需要注意各路径必须是绝对路径。

在项目根目录下新建 src 目录,在 src 目录下新建 css、js 目录。在 src 目录下新建一个index.html空文件,在 js 目录下新建一个index.js空文件。

在项目跟目录下新建 dist 目录。

修改package.json如下。

"scripts": {
  "tauri": "tauri",
  "dev": "webpack serve --config webpack.config.js --mode development"
},

现在先使用yarn dev开启语言服务器。等服务器完全启动后,再使用yarn tauri dev编译运行项目。

此时可以看到弹出窗口显示为文件浏览器。


文章作者: niuiic
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 niuiic !
评论
  目录