tauri+vite+vue3开发环境下创建启动运行和打包发布

Posted volodyan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tauri+vite+vue3开发环境下创建启动运行和打包发布相关的知识，希望对你有一定的参考价值。

目录

 1.创建项目

 2.安装依赖  

3.启动项目 

4.打包生成windows安装包 

 5.安装打包生成的安装包

 1.创建项目

 运行下面命令创建一个tauri项目

pnpm create tauri-app

我创建该项目时的node版本为16.15.0 

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

按需要输入/选择相关信息，一路回车 ，如下图所示，项目就创建成功了。

 2.安装依赖  

进入tauri-app文件夹

 cd tauri-app

  

 运行code .用vscode打开刚创建的tauri-app项目

code .

 安装依赖 

pnpm install

3.启动项目 

运行下面命令启动项目

pnpm tauri dev

 注意：

1.创建项目后，第一次启动项目会非常缓慢，原因是第一次启动项目需要从国外仓库下载多个资源，由于网络原因可能非常缓慢，甚至启动超时报错。这时需要多次运行启动命令。

2.第一次启动成功后，后面再次启动项目时将非常快。

项目启动完成 

 

4.打包生成windows安装包 

运行项目命令打包windows安装包 

pnpm tauri build

注意：新创建的项目，第一次打包会报 “
       Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
 ELIFECYCLE  Command failed with exit code 1.”错误。报这个错误的原因是：第一次打包需要修改src-tauri/tauri.conf.json文件里的配置项"identifier": "com.tauri.dev",改成"identifier": "com.tauri.build",然后再运行打包命令。

把 src-tauri/tauri.conf.json文件里的配置项"identifier": "com.tauri.dev",改成"identifier": "com.tauri.build",然后再运行打包命令

 

 运行 pnpm tauri build命令会有一个下载依赖包的过程，国内由于GitHub慢原因，导致以下文件下载不了，依旧报错。

此时的解决方案：

我们把“https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip“这个链接的压缩包下载到本地。然后在C:\\Users\\你的用户名\\AppData\\Local下找到tauri文件夹，如果没有则创建一个名为tauri的文件夹，在文件夹内再创建一个WixTools目录，将下载的压缩包解压到这个文件夹里面（创建依赖包路径： C:\\Users\\用户\\AppData\\Local\\tauri\\WixTools）。然后再回到VSCode运行打包命令。这个时候就可以打包成功了。 

 

 创建依赖包路径： C:\\Users\\用户\\AppData\\Local\\tauri\\WixTools

 再次执行打包命令

 打包成功后，打开打包生成的目录，就可以看到一个.msi后缀结尾的安装文件tauri-app_0.0.0_x64_en-US.msi（scr-tauri/target/release/bundle/msi/tauri-app_0.0.0_x64_en-US.msi），双击就可以安装了。还有一个可执行包tauri-app.exe（scr-tauri/target/release/tauri-app.exe）。至此，整个创建到打包的流程就完成了。

 

 5.安装打包生成的安装包

 

 

 

Tauri 入门教程


Tauri入门教程

1 简介

Tauri:构建跨平台的快速、安全、前端隔离应用。Tauri 是一个相对较新的框架，允许您利用基本的 Web 技术和 Rust 编程语言快速创建跨平台应用程序。Tauri 基于 Rust 构建，在设计上具有安全性和高性能，与任何前端框架兼容，并允许您为所有主要桌面平台（包括 macOS、Windows 和 Linux 操作系统）创建可执行应用程序。

每个 Tauri 应用程序都包含一个核心进程，作为应用程序的入口点，并且是唯一可以完全访问操作系统的组件。然而，核心进程并不呈现实际的应用程序界面；相反，它会启动使用操作系统提供的 WebView 库的子进程，从而可以使用 Web 技术构建 Tauri 应用程序。

与 Electron 不同，它使用 Chromium 引擎打包和呈现您的应用程序，而不管底层操作系统如何，Tauri 使用操作系统的 WebView 库。Tauri 方法的优点是 WebView 库不包含在最终的可执行文件中，而是在运行时动态链接，这大大降低了捆绑应用程序的大小和性能。

如前所述，Tauri 应用程序由于其 webview 方法而比 Electron 应用程序轻得多。事实上，使用 Electron 构建的重量超过 52MB 的示例应用程序在使用 Tauri 构建时会轻得多，大约 3MB。

Tauri 框架的其他一些主要优势包括：

  • 更好的性能：Tauri 应用程序在性能、启动时间和内存消耗方面也优于 Electron 应用程序
  • 自更新器：Tauri 包含一个自更新器功能，您可以在不依赖任何第三方库的情况下快速将其集成到您的应用程序中
  • 跨平台：当然，您可以为所有主要桌面操作系统生成可执行文件

2 创建Tauri项目(页面基于Vue)

2.1 环境准备

大家需要根据自己的开发环境预先准备下，操作参考官网文档：预先准备

2.2 创建工程

控制台执行：

npm create tauri-app

然后输入项目名称，会自动生成目录，选择包管理工具，选择UI模板，这里我选择Vue，还可以选择react 等前端模板框架：

创建完成后，进入到对应目录，安装依赖，再运行tarui

npm install
npm run tauri dev

经过编译后就自动弹出程序的窗口，里面的页面就是Vue构建的页面：

3 Tauri 工程目录介绍


整个目录结构其实跟vue项目目录很像，只是多了一个src-tauri目录，这个目录是 Tauri 项目配置目录，里面包含了程序的图标 、rust源码、构建后的文件、tauri配置文件。我们在写软件的过程中，有遇到前端不能解决的问题，一般是通过调用rust程序来解决。所以在做一些高级功能的时候我们需要会一点rust知识。

4 页面调用rust方法

在 src-tauri/src/main.rs 中加入前端要调用的方法：

#[tauri::command]
fn my_custom_command() 
  println!("I was invoked from JS!");


// Also in main.rs
fn main() 
  tauri::Builder::default()
    // This is where you pass in your commands
    .invoke_handler(tauri::generate_handler![my_custom_command])
    .run(tauri::generate_context!())
    .expect("failed to run app");

前端调用，可以写在前端的某个事件调用方法里：

// When using the Tauri API npm package:
import  invoke  from '@tauri-apps/api/tauri'

// Invoke the command
invoke('my_custom_command')

传参数和返回参数：

#[tauri::command]
fn my_custom_command(invoke_message: String) -> String 
  println!("I was invoked from JS, with this message: ", invoke_message);
  invoke_message

注意：rust定义参数的时候使用下划线，js调用的时候使用驼峰命名。

invoke('my_custom_command',  invokeMessage: 'Hello!' ).then((message) => console.log(message))

invoke返回的是Promise ，可以使用 async/await 用同步的方式写。

5 事件系统

前端触发并监听方法：

import  invoke  from "@tauri-apps/api/tauri";
import  listen  from '@tauri-apps/api/event'

const unlisten = async () => 
  await invoke('init_process'); // 调用rust任务
  await listen('my-event', event =>  // 监听事件
    console.log(event)
  )

</script>
<template>
  <button @click="unlisten">开启事件监听</button>
</template>

rust 发送事件方法：

use tauri::Window;
use std::thread, time;

#[derive(Clone, serde::Serialize)]
struct Payload 
  message: String,


#[tauri::command]
fn init_process(window: Window) 
  std::thread::spawn(move || 
    loop  // 循环触发
      window.emit("my-event", Payload  message: "Tauri is awesome!".into() ).unwrap(); // 前端自动解析为对象
      thread::sleep(time::Duration::from_millis(1000)); // 每隔一秒执行
    
  );


fn main() 
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![init_process])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");

6 HTTP请求

使用 tauri 访问HTTP请求需要在tauri.conf.json设置白名单：


  "tauri": 
    "allowlist": 
      "http": 
        "all": true, // enable all http APIs
        "request": true // enable HTTP request API

但是这样写不安全，建议仅将您使用的 API 列入白名单，以获得最佳的安装包大小和安全性。


  "tauri": 
    "allowlist": 
      "http": 
        "scope": ["https://api.github.com/repos/tauri-apps/*"]

前端使用：

import  fetch  from '@tauri-apps/api/http';
const response = await fetch('http://localhost:3003/users/2', 
  method: 'GET',
  timeout: 30,
  responseType: 2  // 1-JSON 2-Text 3-Binary
);

7 文件系统


  "tauri": 
    "allowlist": 
      "fs": 
        "scope": ["$APPDATA/databases/*"]

此作用域配置仅允许访问 $APPDATA 目录的数据库文件夹中的文件，注意 $APPDATA 变量的使用。该值在运行时注入，解析为应用程序数据目录。可用的变量是：

  • $APPCONFIG => C:\\Users\\15114\\AppData\\Roaming\\com.tauri.dev\\
  • $APPDATA => C:\\Users\\15114\\AppData\\Roaming\\com.tauri.dev\\
  • $APPLOCALDATA => C:\\Users\\15114\\AppData\\Local\\com.tauri.dev\\
  • $APPCACHE => C:\\Users\\15114\\AppData\\Local\\com.tauri.dev\\
  • $APPLOG => C:\\Users\\15114\\AppData\\Roaming\\com.tauri.dev\\logs\\
  • $AUDIO => C:\\Users\\15114\\Music\\
  • $CACHE => C:\\Users\\15114\\AppData\\Local\\
  • $CONFIG => C:\\Users\\15114\\AppData\\Roaming\\
  • $DATA => C:\\Users\\15114\\AppData\\Roaming\\
  • $LOCALDATA => C:\\Users\\15114\\AppData\\Local\\
  • $DESKTOP => C:\\Users\\15114\\Desktop\\
  • $DOCUMENT => C:\\Users\\15114\\Documents\\
  • $DOWNLOAD => C:\\Users\\15114\\Downloads\\
  • $EXE,
  • $FONT,
  • $HOME => C:\\Users\\15114\\
  • $PICTURE => C:\\Users\\15114\\Pictures\\
  • $PUBLIC => C:\\Users\\Public\\
  • $RUNTIME,
  • $TEMPLATE => C:\\Users\\15114\\AppData\\Roaming\\Microsoft\\Windows\\Templates\\
  • $VIDEO => C:\\Users\\15114\\Videos\\
  • $RESOURCE => \\?\\F:\\project\\demo\\rust\\tauri-demo\\src-tauri\\target\\debug\\
  • $APP, 即将弃用
  • $LOG, 即将弃用
  • $TEMP
import  copyFile,createDir, BaseDirectory  from '@tauri-apps/api/fs';

// Copy the `$APPCONFIG/app.conf` file to `$APPCONFIG/app.conf.bk`
await copyFile('app.conf', 'app.conf.bk',  dir: BaseDirectory.AppConfig );
// Create the `$APPDATA/users` directory
await createDir('users',  dir: BaseDirectory.AppData, recursive: true );

8 对话框

添加 tauri.allowlist.dialog 到 tauri.conf.json


  "tauri": 
    "allowlist": 
      "dialog": 
        "all": true, // enable all dialog APIs
        "open": true, // enable file open API
        "save": true // enable file save API
      
    
  


import  ask  from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');
const yes2 = await ask('This action cannot be reverted. Are you sure?',  title: 'Tauri', type: 'warning' );

9 窗口配置

tauri.config.json 中关于窗口的主要配置：


  "tauri": 
    "windows": [
      
      	"center": true, // 窗口显示在屏幕中间
      	"x": 100, // 窗口显示x坐标
      	"y": 100, // 窗口显示y坐标
        "fullscreen": false, // 是否全屏
        "height": 600, // 窗口高度
        "width": 800, // 窗口宽度
        "resizable": true, // 是否可以resize
        "title": "Tauri App", // 窗口标题
        "decorations": true // 是否显示边框和状态栏
      
    ]

10 打包

修改 tauri.config.json 中 tauri.bundle.identifier ，这是一个唯一标识，可以为软件的名称。
控制台执行命令：

npm run tauri build

这个命令会先编译前端项目，相当于先执行 npm run build 编译出前端静态文件到 dist 目录：

然后回编译 rust 组件，最后生成一个 msi 安装文件：

这个文件在windows系统可以直接双击安装，最后显示界面和开发界面是一样的。

以上是关于tauri+vite+vue3开发环境下创建启动运行和打包发布的主要内容，如果未能解决你的问题，请参考以下文章

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

如何开发一款基于 vite+vue3 的在线表格系统（下）

如何开发一款基于 vite+vue3 的在线表格系统（下）

vite+vue3 项目打包部署

Vue3 —— 使用Vite配置环境变量

Vue3实践Vue3使用vite处理环境变量打包部署nginx配置