# Tauri-Web

**Repository Path**: firfe/Tauri-Web

## Basic Information

- **Project Name**: Tauri-Web
- **Description**: 使用 Webview 在独立窗口中打开指定网址 GitHub https://github.com/Firfr/Tauri-Web Gitee https://gitee.com/firfe/Tauri-Web
- **Primary Language**: Rust
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-14
- **Last Updated**: 2026-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tauri-Web

使用 Tauri 创建的软件，打开后把同目录下的`配置.json`文件中`url`字段对应的网址在 Webview 中打开。

软件的作用是解决个人日常使用中的痛点：使用便携版浏览器安装的渐进式网页应用(PWA)无法在单独的标签页中展示，总是和浏览器本身合并在同一个标签页中。

欢迎关注我B站账号 [秦曱凧](https://space.bilibili.com/17547201) (读作 qín yuē zhēng)  

如果这个项目有帮到你。欢迎start。也厚颜期待您的[打赏](https://gitee.com/firfe/me)。

## 使用方法

- 下载可执行程序到本地
- 在可执行文件同目录创建文件`配置.json`
  - 示例内容如下
    ```json
    {
      "网址":"https://space.bilibili.com/17547201",
      "标题":"秦曱凧B站主页"
    }
    ```
  - `网址` 字段 必须，软件要打开的网址
  - `标题` 字段 非必须，软件窗口标题
- 自定义软件图标
  - 可执行文件图标，可在编译时自定义，也可以使用下面软件直接修改可执行文件的图标
    - https://github.com/wzsx150/ResourceHacker_CN
  - 窗口和任务栏图标
    - 在可执行文件同目录创建`数据`目录
    - 在目录中存放图片文件
    - 图片文件名字`图标`
    - 后缀优先顺序 `png` `ico` `jpg` `jpge`
- 双击运行软件

```
.
|-Tauri-Web-秦曱凧.exe  软件本体
|-配置.json             必须的配置文件
|-数据                  产生的数据目录 会自动创建
| |-图标.png            自定义任务栏和窗口的图标文件，非必须
```

## 环境配置

- 系统：Windows 10 +
- Node.js
  - 版本：24
  - 官网：https://nodejs.org/zh-cn/download
  - 下载安装包安装即可
  - 设置 npm 源为国内源，方便下载依赖包
    ```bash
    npm config set registry https://registry.npmmirror.com
    ```
- Microsoft C++ 构建工具
  - Tauri 编译 Rust 后端需要 Visual Studio 的 C++ 工具链。
  - 官网：https://visualstudio.microsoft.com/zh-hans/visual-cpp-build-tools/
  - 下载生成工具，安装
  - 安装时勾选：
    - 使用 C++ 的桌面开发
    - 确保包含 Windows 10/11 SDK 和 CMake 工具（可选但推荐）
- Rust
  - 设置 Rust 镜像源（USTC 中国科大）
    - 中科大镜像源：https://mirrors.ustc.edu.cn/help/rust-static.html
    ```powershell
    $env:RUSTUP_DIST_SERVER="https://mirrors.ustc.edu.cn/rust-static"
    $env:RUSTUP_UPDATE_ROOT="https://mirrors.ustc.edu.cn/rust-static/rustup"
    ```
  - 下载 rustup-init.exe
    - 官网：https://rust-lang.org/zh-CN/tools/install/
  - 下载后正常安装即可
- 开发工具推荐 VSCode
  - 官网：https://code.visualstudio.com/Download
  - 建议安装 `System Installer` 版本
- Tauri
  - 官网：https://tauri.app/zh-cn/
  - 版本 2.10.1
  - 对应的 `cli` 版本为 `2.9.6`
  - 对应的项目脚手架工具 `create-tauri-app` 版本 `4.6.2`
- 个人习惯锁定软件具体版本，防止不必要的意外

## 创建项目

> 创建新的项目或拉取本仓库  
> 必须包含配置文件`配置.json`文件，且文件中必须有字段`网址`。  
> 无论拉取和创建项目，都需要在项目根目录创建一个空目录`占位目录`  
> `占位目录` 是空的，用来给 Tauri 编译项目做占位使用，Tauri 要求必须有一个前段目录。

- 命令行转到项目父目录
- 创建项目
  ```bash
  npm create tauri-app@4.6.2 tauri-web
  ```
- 选项
  - `? Identifier (com.win.web-tauri) ›` 直接回车
    - 应用的唯一 Bundle ID（包标识符）
  - 选择应用前端（UI 层）用什么技术栈
    ```
    ? Choose which language to use for your frontend ›
    ❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
      Rust
      .NET
    ```
    - 选择 `TypeScript / JavaScript`
  - 选择前端项目的包管理器，
    ```
    ? Choose your package manager ›
    ❯ npm
      pnpm
      yarn
      deno
      bun
    ```
    - 选择 `npm`
  - 选择前端 UI 的开发模板（框架）
    ```
    ? Choose your UI template ›
    ❯ Vanilla  无任何框架
      Vue
      Svelte
      React
      Solid
      Angular
      Preact
    ```
    - 选择 `Vanilla`，即无任何框架
  - 选择前端逻辑语言
    ```
    ? Choose your UI flavor ›
      TypeScript
    ❯ JavaScript
    ```
    - 选择 `JavaScript`
- 创建完成后，进入项目目录 `web-tauri`
- 修改文件
  - 参考本项目文件内容修改
  - 修改配置文件`配置.json`
  - 修改`src-tauri/tauri.conf.json`
    > Tauri特定的配置文件，定义了：
    - 应用程序元数据（名称、版本等）
    - 窗口配置
    - 构建和打包选项
  - 修改`src-tauri/Cargo.toml`
    > Rust项目的依赖管理和配置文件，定义了：
    - 项目基本信息
    - 依赖库列表（如tauri、tokio、hyper等）
    - 构建配置
  - 修改`src-tauri/src/main.rs`
    > 这是应用程序的主要入口点，包含：
    - HTTP服务器的实现
    - 静态文件服务功能
    - Tauri应用的初始化和配置
  - 创建一个空目录 `占位目录`

## 运行&编译

- 安装依赖
  ```bash
  npm install
  ```
- 调试运行
  - 把 `./配置.json` 文件复制到 `./src-tauri/target/debug` 下
    - 目录不存在则手动创建
  - 调试运行
    ```bash
    npm run tauri dev
    ```
- 编译安装包
  ```bash
  npm run tauri build
  ```
  - 编译后安装包在 `./src-tauri/target/release` 目录下
  - 只有后缀为 `.exe` 的文件是所需要的，其他的不用管

> 遇到报错等，把报错发给AI，让AI解决，记住要给出运行环境的具体版本，要不然AI的回答可能会是旧版本的。