tauri 将网页打包成exe和已有的vue项目打包成exe

Tauri是一个用于构建小型、高性能的桌面应用程序的框架，它允许开发者使用前端技术（如HTML、CSS和JavaScript）来构建跨平台的桌面应用。与Electron等其他框架相比，Tauri在打包的体积和性能上更具优势。本文将介绍如何使用Tauri将网页打包成可执行文件（Exe），以及如何将已有的Vue项目打包成Exe。

Tauri简介

Tauri是一个轻量级的框架，使用Rust作为后端，结合前端技术栈来创建桌面应用。它支持Windows、macOS和Linux，且打包后的应用体积通常较小，适合需要高性能和小体积的场景。

准备工作

在开始之前，请确保你已经安装了以下工具： 1. Node.js 2. Rust及Cargo 3. Tauri CLI

你可以通过以下命令安装Tauri CLI：

cargo install tauri-cli

将网页打包成Exe

如果你想将一个简单的网页打包成Exe，可以创建一个新的Tauri项目：

1. 创建新项目

mkdir my-tauri-app
cd my-tauri-app
npm init -y

1. 初始化Tauri

npx tauri init

1. 替换 src-tauri/tauri.conf.json 中的 distDir 以指向你的网页文件夹。假设你的网页文件在 public 文件夹中，配置如下：

// src-tauri/tauri.conf.json
{
  "tauri": {
    "build": {
      "distDir": "../public",
      "devPath": "http://localhost:3000"
    }
  }
}

1. 确保你的网页文件（如 index.html）在 public 文件夹内。

2. 打包应用：

npm run tauri build

执行此命令后，将在 src-tauri/target/release 中生成Exe文件。

将Vue项目打包成Exe

对于已有的Vue项目，过程类似。以下是详细步骤：

1. 创建或进入现有的Vue项目：

vue create my-vue-app
cd my-vue-app

1. 添加Tauri支持：

npm install @tauri-apps/cli --save-dev

1. 初始化Tauri：

npx tauri init

1. 修改 src-tauri/tauri.conf.json 文件，使其指向Vue的构建输出文件。通常，Vue项目的构建输出位于 dist 文件夹，配置如下：

// src-tauri/tauri.conf.json
{
  "tauri": {
    "build": {
      "distDir": "../dist",
      "devPath": "http://localhost:8080"
    }
  }
}

1. 构建Vue项目：

npm run build

1. 最后，使用Tauri打包：

npm run tauri build

代码示例

1. main.rs 的基本设置（位于 src-tauri/src/main.rs）：

fn main() {
    tauri::AppBuilder::new()
        .invoke_handler(tauri::generate_handler![/* .. */])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

1. Tauri的接口示例： 你可以在Vue或HTML中使用Tauri提供的接口，例如调用后端API或执行系统操作。这些操作可以通过Tauri的JS API访问：

import { invoke } from '@tauri-apps/api';

async function invokeRustFunction() {
  const response = await invoke('my_rust_function');
  console.log(response);
}

总结

使用Tauri打包网页或现有的Vue项目为Exe是一个简单且高效的过程。Tauri不仅可以降低打包文件的体积，还能利用Rust的性能来增强桌面应用的表现。通过上述步骤，你可以轻松将你的网页或Vue项目打包成跨平台的桌面应用。希望这篇文章能够帮助你在Tauri的探索之旅中更进一步！