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

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

1. 环境准备

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

安装 Tauri CLI:

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

相关推荐
大波V55 分钟前
vue3 使用docxtemplater 动态生成docx
前端·javascript·vue.js
1024小神6 分钟前
网页注入js代码实现获取请求的url和请求体内容,并获取响应体内容
前端·javascript
Fuzzyface7 分钟前
SPA是如何通过js不刷新页面但是更新浏览器的url的?
前端·javascript
simple丶7 分钟前
前端工程化:框架基础搭建
前端
用户25871419326321 分钟前
Vue3使用多线程处理文件分片任务
前端
不懂装懂的不懂23 分钟前
【vue3】中断请求、取消请求
前端·javascript·vue.js
鱼樱前端28 分钟前
React18+pnpm+Ts+React-Router v6从0-1搭建后台系统
前端·javascript·react.js
Epicurus29 分钟前
ES6箭头函数
前端
掘金0130 分钟前
手把手教你使用 FLV.js 在 Vue 项目中播放 FLV 视频
前端
前端没钱30 分钟前
vue3怎么和大模型交互?
前端