tauri项目加载静态html和js文件，并打包发布

2025/3/14 19:08:40 来源：https://blog.csdn.net/weixin_44786530/article/details/145469474 浏览: 次关键词：tauri项目加载静态html和js文件，并打包发布

使用 Tauri 开发项目时，你可以选择不使用 Vue 或 React 等前端框架，而是直接使用纯 HTML 和 JavaScript 来编写项目。以下是使用纯 HTML 和 JavaScript 开发 Tauri 项目的步骤，包括启动、编译和发布。在创建过程中，选择 `Vanilla` 模板（即纯 HTML/JS 模板）。

1. 环境准备

首先，确保你已经安装了 Tauri 所需的依赖：

- [Rust](https://www.rust-lang.org/tools/install)
- [Node.js](https://nodejs.org/)
- [Tauri CLI](https://tauri.app/v1/guides/getting-started/setup/)

安装 Tauri CLI：

npm install -g @tauri-apps/cli

2. 创建 Tauri 项目

使用 Tauri CLI 创建一个新项目：

npx create-tauri-app

在创建过程中，选择 `Vanilla` 模板（即纯 HTML/JS 模板）。

3. 项目结构

创建完成后，项目结构大致如下：

/my-tauri-app
├── src
│   ├── index.html
│   ├── main.js
│   └── style.css
├── src-tauri
│   ├── Cargo.toml
│   ├── tauri.conf.json
│   └── ...
├── package.json
└── ...

- `src/index.html`：你的主 HTML 文件。
- `src/main.js`：你的主 JavaScript 文件。
- `src/style.css`：你的样式文件。
- `src-tauri/`：Tauri 的 Rust 后端配置和代码。

4. 编写 HTML 和 JavaScript

你可以在 `src/index.html` 和 `src/main.js` 中编写你的前端代码。例如：

**src/index.html**:

html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Tauri App</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>Hello, Tauri!</h1><button id="clickMe">Click Me</button><script src="main.js"></script>
</body>
</html>

src/main.js:

document.getElementById('clickMe').addEventListener('click', () => {alert('Button clicked!');
});

5. 启动开发服务器

在项目根目录下运行以下命令来启动开发服务器：

npm run tauri dev

这将启动 Tauri 的开发服务器，并打开一个窗口显示你的应用。

6. 编译和发布

当你完成开发并准备发布应用时，可以使用以下命令来编译和打包你的应用：

npm run tauri build

这将会生成一个可执行文件，默认情况下会放在 src-tauri/target/release/ 目录下。

7. 自定义发布配置

你可以通过修改 src-tauri/tauri.conf.json 文件来自定义应用的配置，例如应用名称、图标、窗口大小等。

例如，修改 tauri.conf.json 中的 package 和 build 部分：

{"package": {"productName": "MyTauriApp","version": "1.0.0"},"build": {"distDir": "../src","devPath": "http://localhost:3000","beforeDevCommand": "","beforeBuildCommand": ""},"tauri": {"windows": [{"title": "MyTauriApp","width": 800,"height": 600,"resizable": true,"fullscreen": false}]}
}

8. 打包为安装程序

Tauri 支持将应用打包为不同平台的安装程序（如 Windows 的 .msi，macOS 的 .dmg，Linux 的 .deb 等）。你可以通过以下命令生成安装包：

npm run tauri build -- --target universal-apple-darwin # macOS
npm run tauri build -- --target x86_64-pc-windows-msvc # Windows
npm run tauri build -- --target x86_64-unknown-linux-gnu # Linux

生成的安装包会放在 src-tauri/target/release/ 目录下。