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

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

1. 环境准备

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

  • Rust\](https://www.rust-lang.org/tools/install)

  • Tauri CLI\](https://tauri.app/v1/guides/getting-started/setup/)

bash 复制代码
npm install -g @tauri-apps/cli

2. 创建 Tauri 项目

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

lua 复制代码
npx create-tauri-app

在创建过程中,选择 `Vanilla` 模板(即纯 HTML/JS 模板)。

3. 项目结构

创建完成后,项目结构大致如下:

css 复制代码
/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**:

xml 复制代码
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:

javascript 复制代码
document.getElementById('clickMe').addEventListener('click', () => {
    alert('Button clicked!');
});

5. 启动开发服务器

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

arduino 复制代码
npm run tauri dev

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

6. 编译和发布

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

arduino 复制代码
npm run tauri build

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

7. 自定义发布配置

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

例如,修改 tauri.conf.json 中的 packagebuild 部分:

json 复制代码
{
  "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 等)。你可以通过以下命令生成安装包:

arduino 复制代码
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/ 目录下。

相关推荐
前端小巷子20 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑23 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了23 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆30 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆35 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan38 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员