当前位置：首页 > article >正文

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

article 2025/3/15 23:29:05

使用 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/ 目录下。

查看全文

http://www.kler.cn/a/586166.html