Vue + JS + tauri 开发一个简单的PC端桌面应用程序

Vue + JS + tauri 开发一个简单的PC端桌面应用程序

文章目录

  • Vue + JS + tauri 开发一个简单的PC端桌面应用程序
  • 1. 环境准备
    • 1.1 安装 Microsoft Visual Studio C++ 生成工具[^2]
    • 1.2 安装 Rust[^3]
  • 2. 使用 vite 打包工具创建一个 vue 应用
    • 2.1 使用Vite创建前端Vue项目
    • 2.2 更改Vite打包配置项
    • 2.3 创建 Rust 项目开管理项目
  • 3.打包应用程序
  • 4. 实例分享

Tauri 1是一款应用构建工具包,让您能够为使用 Web 技术的所有主流桌面操作系统构建软件。tauri 框架与 electron 非常相似。

taurielectron
体积10MB100MB
打包速度2s17s

1. 环境准备

1.1 安装 Microsoft Visual Studio C++ 生成工具2

image

1.2 安装 Rust3

# PowerShell
PS C:\> winget install --id Rustlang.Rustup

2. 使用 vite 打包工具创建一个 vue 应用

Tauri 由一个可搭配任何前端来构建桌面应用的框架和 Rust 核心构成。

  1. 创建窗口并向其提供原生功能支持的 Rust 二进制文件
  2. 由您选择的前端框架,用于编写窗口内的用户界面

预览以下效果:
在这里插入图片描述

2.1 使用Vite创建前端Vue项目

# npm
$ npm create vite@latest

2.2 更改Vite打包配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({clearScreen: false,server: {strictPort: true},envPrefix: ['VITE_', 'TAURI_PLATFORM', 'TAURI_ARCH', 'TAURI_FAMILY', 'TAURI_PLATFORM_VERSION', 'TAURI_PLATFORM_TYPE', 'TAURI_DEBUG'],build: {target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,sourcemap: !!process.env.TAURI_DEBUG,},plugins: [vue()],
})

每款 Tauri 应用的核心都是由一个管理窗口的 Rust 二进制文件、WebView 和进行系统调用的 tauri Rust 包构成。

2.3 创建 Rust 项目开管理项目

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

安装完脚手架工具,就可以开始创建 Rust 项目了。

$ npm run tauri init

它会向您询问几个问题:

  1. 您应用的名字是什么?
    这将会是您打包后和操作系统会调用的应用名称。 您可以在此处填写任何您想要的名称。如 vite-project

  2. 窗口标题叫什么?
    这将会是您主窗口的默认标题。 您可以在此处填写任何您想要的名称。如 vite-project

  3. 前端页面资源 (HTML/CSS/JS) 相对于 <current dir>/src-tauri/tauri.conf.json 文件将被创建的位置?
    这是 production环境时tauri加载web前端资源的目录.
    Use ../dist for this value.

  4. 开发环境时的加载路径?
    可以是一个网络地址也可以是一个文件路径 development.
    Use http://localhost:5173 for this value.

  5. 你将使用什么命令来开发前端页面?
    这是启动前端开发服务器的命令。
    Use npm run dev (make sure to adapt this to use the package manager of your choice).

  6. 你将使用什么命令来构建前端页面?
    这是构建前端文件的命令。

安装完成后,会在项目根目录生成一个文件夹 src-tauri,在这个文件下中放置着 tauri 的配置以及以后打包的应用程序,结构如下:

- src-tauri
-- icons # 应用图标
--- 32x32.png
--- icon.icns
--- icon.ico
--- icon.png
-- src
--- main.rs # Rust 程序的入口,也是启动 Tauri 的地方
-- target
--- debug
--- release # 打包后的应用程序 - 可以发布的版本
--- .rustc_info.json
--- CACHEDIR.TAG

在 package.json 文件中添加 脚本命令

{"scripts": {"tauri": "tauri"}
}

此时还不能运行 npm run rauri dev 来启动应用程序,还需要更改一个 tauri.conf.json 的默认配置项 identifier, 否则就报如下错误: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.

{"tauri": {"bundle": {"identifier": "com.tauri-app.dev"}}
}

注意:vite运行的port端口必须要与tauri配置的port保持一致,否则访问启动应用程序。

配置完成后就可以 npm run tauri dev 开启动应用程序了,第一次启动应用程序比较慢,会自动下载若干依赖和插件。

打包后的应用程序就在 src-tauri/target/release/文件夹中,其中 vite-project.exe 就是应用程序,仅为3M左右。双击 vite-project.exe就可以启动的应用程序。也可以把文件复制到其他地方启动,是一样的效果。

3.打包应用程序

# build
$ npm run tauri build

打包之后的应用程序

4. 实例分享

DEMO:tauri-app桌面应用程序下载


  1. https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites ↩︎

  2. https://visualstudio.microsoft.com/visual-cpp-build-tools/ ↩︎

  3. https://www.rust-lang.org/tools/install ↩︎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕业设计 基于Java的美食信息推荐系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

vi/vim 编辑器 --基本命令

1 vi/vim编辑器介绍 vi 是visual interface 的简称&#xff0c;是Linux中最经典的文本编辑器 vim是vi的加强版。兼容了vi的所有指令&#xff0c;不仅能编辑文本&#xff0c;而且具有shell程序编辑的功能&#xff0c;可以通过不同颜色的字体辨别语法的正确性&#xff0c;极大…

轻松识别Midjourney等AI生成图片,开源GenImage

AIGC时代&#xff0c;人人都可以使用Midjourney、Stable Diffusion等AI产品生成高质量图片&#xff0c;其逼真程度肉眼难以区分真假。这种虚假照片有时会对社会产生不良影响&#xff0c;例如&#xff0c;生成公众人物不雅图片用于散播谣言&#xff1b;合成虚假图片用于金融欺诈…

支持华为GaussDB数据库的免费开源ERP:人力资源管理解决方案概述

开源智造所推出的Odoo SuperPeople数字化解决方案将HR和薪资数据与财务、项目规划、预算和采购流程连接起来&#xff0c;消除了多套系统给企业带来的信息孤岛问题。 ——复星集团 人力资源中心 高经理 一种更具吸引力、更有洞察力的人员管理方式 什么是开源智造Odoo的人力资源…

【Vue】后端返回文件流,前端预览文件

let date;request({url: this.$route.query.url,method: get,responseType: blob,}).then(resp > {date respthis.path window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))}).catch((e) > {//旧版本浏览器下的blob创建对象window.Blo…

centos系统设置runlevel为5

在 CentOS 系统中&#xff0c;可以使用以下步骤将运行级别&#xff08;runlevel&#xff09;设置为 5&#xff1a; 1. 打开终端或 SSH 连接到 CentOS 服务器。 2. 以 root 用户身份登录。 3. 运行以下命令来编辑 /etc/inittab 文件&#xff1a; shell sudo vi /etc/inittab…

中产医学产康AI智慧云发布会暨中产学院2024年度盛典圆满成功

【向光而行】中国医学产康AI智慧云服务平台发布会暨中产学院2024年度盛典 前言 开新局&#xff0c;迈新步&#xff0c;谋新篇&#xff0c;创新绩。中产医学产康AI智慧云服务平台发布会 暨中产学院2024年度盛典于2024年1月10日在郑州.涵唐酒店成功举办。本次年会以“【向光而行…

跟着cherno手搓游戏引擎【7】Input轮询

在引擎程序中任何时间&#xff0c;任何位置都能知道按键是否按下、鼠标的位置等等信息。 与事件系统的区别&#xff1a;事件系统是在按下时调用并传递按键状态&#xff1b;轮询是每时每刻都能获取按键状态 创建基类&#xff1a; YOTO/Input.h&#xff1a;名如其意 #pragma …

php反序列化之pop链构造(基于重庆橙子科技靶场)

常见魔术方法的触发 __construct() //创建类对象时调用 __destruct() //对象被销毁时触发 __call() //在对象中调用不可访问的方法时触发 __callStatic() //在静态方式中调用不可访问的方法时触发 __get() //调用类中不存在变量时触发&#xff08;找有连续箭头的…

wins安装paddle框架

一、安装 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/windows-pip.html 装包&#xff08;python 的版本是否满足要求&#xff1a; 3.8/3.9/3.10/3.11/3.12&#xff0c; pip 版本为 20.2.2 或更高版本 &#xff09; CPU 版:…

Springboot项目:解决@Async注解获取不到上下文信息问题

问题描述 springboot项目中&#xff0c;需要使用到异步调用某个方法&#xff0c;此时 第一个想到的就是 Async 注解&#xff0c;但是 发现 方法执行报错了&#xff0c;具体报错如下&#xff1a; java.lang.NullPointerExceptionat com.ruoyi.common.utils.ServletUtils.getRe…

用VSCode玩STM32的烧录工具 CooCox Cortex Flash Programmer

一、下载软件 经热心兄弟推荐的版本&#xff0c;不知道有没有版权&#xff0c;如有版权问题&#xff0c;请通知删除。 CSDN - 0积分下载&#xff1a;https://download.csdn.net/download/qq_49053936/88744187 二、生成bin文件 插件不同&#xff0c;方法有所不同&#xff0c;各…

《C++大学教程》3.11修改GradeBook类

按如下要求修改GradeBook类: a)包括第二个 string 数据成员&#xff0c;它表示授课教师的名字。 b)提供一个可以改变教师姓名的设置函数&#xff0c;以及一个可以得到该名字的获取函数。 c)修改构造函数&#xff0c;它指定了两个形参&#xff0c;一个针对课程名称&#xff0c;另…

编写RedisUtil来操作Redis

目录 ​编辑 Redis中文网 第一步&#xff1a;建springboot项目 第二步&#xff1a;导依赖 第三步&#xff1a;启动类 第四步&#xff1a;yml 第五步&#xff1a;Redis配置类 第六步&#xff1a;测试类 第七步&#xff1a;编写工具类 RedisUtil 第八步&#xff1a;编写…

Python 面向对象之继承

目录 概述 继承的作用 缺点 单继承实现 设置person类 创建子类学生类 实例化student类 创建worker子类 实例化worker类 子类独有属性 父类私有属性 子类构造函数修改 实例化子类 多继承实现 创建基类 创建父亲类 创建母亲类 创建子类 引入基类 创建子类并继…

现代雷达车载应用——第3章 MIMO雷达技术 3.5节 汽车MIMO雷达的挑战

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 3.5 汽车MIMO雷达的挑战 在本节中&#xff0c;我们讨论了汽车MIMO雷达的设计挑战&#xff0c;包括多径反射存在时的测角、波形正交性和高效高分辨率角…

如何保证新加入的依赖版本与当前项目的其他相关依赖版本兼容?或者如何确保依赖版本升级后适合当前项目?或者如何保证新引入的依赖版本适合当前项目?

如何保证新加入的依赖版本与当前项目的其他相关依赖版本兼容&#xff1f;或者如何确保依赖版本升级后适合当前项目&#xff1f;或者如何保证新引入的依赖版本适合当前项目&#xff1f; 如题&#xff0c;可通过maven仓库找出各个版本之间的对应关系举例 如题&#xff0c;可通过m…

C/C++利用指针输出二维数组元素

方法一 用指向单个整型常量的指针p依次访问每个元素 int main() {int i, j;int a[2][3] { 1,2,3,4,5,6 };int* p &a[0][0];for (i 0; i< 2; i) {for (j 0; j < 3; j) {cout << left << setw(3) << *p;p;}cout << endl;}return 0; } 方法…

二阶构造设计模式

目录 构造函数回顾 深入思考 实验 构造函数的真相 半成品对象 引入二阶构造设计模式 设计理念 二阶构造设计模式图 二阶构造示例 完整demo 小结 构造函数回顾 类的构造函数用于对象的初始化。构造函数与类同名并且没有返回值。构造函数在对象定义时自动被调用 深入…

iphone 5s的充电时序原理图纸,iPAD充电讲解

上一篇写了iphone 5的时序。那是电池供电的开机时序。iphone 5s也是差不多的过程&#xff0c;不说了。现在看iphone5s手机充电时候的时序。iphone5s充电比iphone5充电简单了很多。 首先是usb接口接到手机上&#xff0c;usb线连接到J7接口上。J7接口不只是接usb&#xff0c;还能…