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

news2024/12/27 13:34:09

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.coloradmin.cn/o/1386861.html

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

相关文章

vue中使用高德地图渲染多个不同类型的点,根据勾选数据 类型不同打点显示隐藏

一、在index.html文件中引入高德地图JavaScript API的2.0版本SDK <script src"https://webapi.amap.com/maps?v2.0&key你的高德地图Key"></script>二、创建一个Vue组件&#xff0c;用于渲染地图和点位 html <template><div class"m…

Axure全面指南:正确打开并高效使用的步骤!

AxureRP是目前流行的设计精美的用户界面和交互软件。AxureRP根据其应用领域提供了一组丰富的UI控制。作为Axure的国内替代品&#xff0c;即时设计可以在线协作&#xff0c;浏览器可以在无需下载客户端的情况下打开和使用。如果以前使用Axure&#xff0c;很容易切换到即时设计。…

记录el-select+el-tree复选框,支持模糊查询,懒加载,树父子节点不关联,不全选

需求&#xff1a;一个机构下拉菜单&#xff0c;一个人员下拉菜单&#xff0c;默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口&#xff0c;模糊查询为一个接口不包含懒加载&#xff0c;默认非模糊查询情况下为一个接口&#xff0c;点击节点懒加载。机构下拉菜单数据…

探索FTP:原理、实践与安全优化

引言 在正式开始讲解之前&#xff0c;首先来了解一下文件存储的类型有哪些。 DAS、SAN和NAS是三种不同的存储架构&#xff0c;分别用于解决不同场景下的数据存储需求。 DAS (Direct Attached Storage 直接附加存储)&#xff1a;DAS 是指将存储设备&#xff08;如硬盘&#x…

线程之间如何传递上下文信息

文章目录 源码解读1. 扩展ThreadPoolExecutor2. 扩展Runnable3. 整体流程 源于工作中一个业务场景的需求。 源码 话不多说&#xff0c;先贴完整的源码&#xff1a; public class ContextPassingBetweenThread {private static ThreadLocal<String> CONTEXT new Thread…

倍福嵌入式PLC开发团队建设

倍福嵌入式PLC开发工程师确实比较难找&#xff0c;这是因为这个领域需要具备丰富的专业知识和技能&#xff0c;而且经验越丰富的工程师越难找到。以下是一些可能导致倍福嵌入式PLC开发工程师难找的原因&#xff1a; 具备相关技能的工程师数量相对较少&#xff1a;嵌入式PLC开发…

Linux平台建立GB28181设备模拟器

目录 下载模拟器解决动态库缺少问题运行模拟器抓包参考资料 在没有GB28181摄像机的情况下,在Linux虚拟机中模拟出一台GB28181摄像机用于调试和学习. 下载模拟器 到网站下载Linux 平台版本: https://www.happytimesoft.com/download.html tar -zxvf happytime-gb28181-device…

Python简介-Python入门到精通

Python的创始人为荷兰人吉多范罗苏姆&#xff08;Guido van Rossum&#xff09;。1989年圣诞节期间&#xff0c;在阿姆斯特丹&#xff0c;Guido为了打发圣诞节的无趣&#xff0c;决心开发一个新的脚本解释程序&#xff0c;作为ABC语言的一种继承。之所以选中Python&#xff08;…

Python中元组解构的技巧

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python中&#xff0c;元组&#xff08;tuple&#xff09;是一种常用的数据结构&#xff0c;它可以将多个值组合在一起。元组的解构是一项强大的特性&#xff0c;快速、方便地将元组中的值分配给多个变量。本文…

【电脑技巧】Win11关闭自动更新

要想彻底关闭Windows电脑的自动更新&#xff0c;仅仅从系统设置里面选择暂停更新是完全不够用的&#xff0c;只有将windows自动更新的服务关闭掉&#xff0c;才能有效阻止其更新。 关闭win11电脑自动更新的办法&#xff0c;具体操作如下&#xff1a; 1.在winr运行框中输入servi…

vivado 使用IP Integrator源

使用IP Integrator源 在Vivado Design Suite中&#xff0c;您可以在RTL中添加和管理IP子系统块设计&#xff08;.bd&#xff09;项目或设计。使用Vivado IP集成程序&#xff0c;您可以创建IP子系统块设计。IP集成程序使您能够通过实例化和将Vivado IP目录中的多个IP核互连。可…

运筹说 第56期 | 整数规划的数学模型割平面法

前几章讨论过的线性规划问题的一个共同特点是&#xff1a;最优解的取值可以是分数或者小数。然而&#xff0c;在许多实际问题中&#xff0c;决策者要求最优解必须是整数&#xff0c;例如公交车的车辆数、员工的人数、机器的台数、产品的件数等。那么&#xff0c;我们能否将得到…

Zynq7020 使用 Video Processing Subsystem 实现图像缩放

1、前言 没玩过图像缩放都不好意思说自己玩儿过FPGA&#xff0c;这是CSDN某大佬说过的一句话&#xff0c;鄙人深信不疑。。。 目前市面上主流的FPGA图像缩放方案如下&#xff1a;1&#xff1a;Xilinx的HLS方案&#xff0c;该方案简单&#xff0c;易于实现&#xff0c;但只能用…

【RTOS】快速体验FreeRTOS所有常用API(4)队列

目录 四、队列2.1 概念2.2 创建队列2.3 写队列2.4 读队列2.5 队列集&#xff08;可跳过&#xff09; 四、队列 该部分在上份代码基础上修改得来&#xff0c;代码下载链接&#xff1a; https://wwzr.lanzout.com/iBNAS1l75bvc 密码:7xy2 该代码尽量做到最简&#xff0c;不添加多…

软件技术写作指南

▲ 搜索“大龙谈智能内容”关注公众号▲ James是一位居住在苏格兰的文档工程师。 2023年12月&#xff0c;他写了一个名为《Advent of Technical Writing》的系列文章。从12月1日到12月24日&#xff0c;他每天都会在其中发表一篇关于技术写作的博客文章。现在&#xff0c;该系…

c语言for循环和水仙花

c语言for循环和水仙花 c语言for循环和水仙花 c语言for循环和水仙花一、for循环语句格式二、for循环案例水仙花 一、for循环语句格式 for(初始值&#xff1b;表达式&#xff1b;表达式) { 代码 }int main() {for (int i 0; i < 10; i){printf("%d\n", i);} }二、f…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析&#xff0c;这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考&#xff1a;财经新闻数据 数据来源 新浪财经的新闻网&#xff0c;说实话&#xff0c;他这个网站做成这样就是用来爬虫的…

【docker笔记】DockerFile

DockerFile Docker镜像结构的分层 镜像不是一个单一的文件&#xff0c;而是有多层构成。 容器其实是在镜像的最上面加了一层读写层&#xff0c;在运行容器里做的任何文件改动&#xff0c;都会写到这个读写层。 如果删除了容器&#xff0c;也就是删除了其最上面的读写层&…

解决Qt的release构建下无法进入断点调试的问题

在工作的时候遇到了第三方库只提供release版本的库的情况&#xff0c;我需要在这基础上封装一层自家库&#xff0c;在调试的时候遇到如下问题&#xff0c;但是在Qt环境下&#xff0c;release的库只能在进行release构建和调试。 卡在了一直进不了断点的情况。提示内容如下&#…