[Tauri+vite+ts]关于tauri打包带自定义目录/文件的解决方案

最新推荐文章于 2025-06-12 21:37:55 发布
最新推荐文章于 2025-06-12 21:37:55 发布
阅读量3.2k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Tauri+vite笔记 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37331806/article/details/126337521
本文介绍如何在Tauri项目中配置资源文件，通过编辑`tauri.conf.json`文件指定`bundle`下的`resources`路径，实现自定义资源文件的打包。特别需要注意的是，资源文件或目录最好放置在`src-tauri`目录下，否则打包时可能会出现问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考icon-default.png?t=M666https://tauri.app/v1/api/config/#bundleconfig在src-tauri中找到tauri.conf.json文件

 在bundle下找到resources，里面填写要加入的目录或者文件地址

效果：

 
 注意！！！！文件最好放在src-tauri下

不然，他会原封不动的封入你写的地址；如：

App放在src目录下：

 

 

则安装出来的文件目录如图：

 其中        "../" 对应 "_up_"

创建 Tauri + Vue + Typescript + Vite + Less 应用
niuiic的博客
06-04 2412
项目创建流程 直接上代码 app_init.sh $templatePath=xxx echo "What's your app's name?" read appName yarn create @vitejs/app $appName --template vue-ts cd $appName yarn set version berry cp "$templatePath/tauri/yarnrc.yml" .yarnrc.yml yarn install yarn add less -D yarn
【调试笔记-20240619-Windows- Tauri + Vite + Vue + TS 显示系统信息】
David唐辉的博客
06-19 535
本文记录在 Windows 环境下调试 Tauri 程序显示系统信息的步骤。实验使用的电脑如下：本文记录在 Windows 环境下调试 Tauri 程序显示系统信息的步骤和遇到的问题的解决方法。
【Tauri2】031 windows系统下的打包
qq_63401240的博客
04-24 1049
笔者会使用NSIS这个东西，就来演示一下，自定义打包需要安装NIS Edit安装完成后，流程如下新建程序的基本设定安装程序的基本设定程序的默认目录exe文件，看情况，如果还有其他文件，可以添加图标设置运行和保存脚本笔者放在桌面一个是用于安装，一个生成的安装脚本运行Setup.exe，安装后，如下。
tauri 2.0 嵌入外部文件
最新发布
腊肉的博客
06-12 927
Tauri外部文件处理教程摘要： 通过tauri.conf.json的bundle.resources指定外部文件路径，支持通配符和精确路径两种方式 路径优先级 - 详细配置需放在通配配置前，否则生产环境可能出现文件冲突 文件读取 - 使用resolveResource定位文件，readTextFile读取文本内容（如JSON配置） 媒体处理 - 通过readFile读取二进制文件（如视频），转换为Blob对象后生
Tauri 打包
豪先生的博客
11-19 1884
2022/11/3 样式丢失解决了，在阿里巴巴图标库下载的图标最好是用svg，我是暂时用这个打包之后显示正常。然后放在路径C盘/用户/当前账户/AppData/Local/tauri/WixTools。我们需要在tauri.conf.json里面查找identifier这个名称。说下其他的，Tauri感觉确实比electron的内存占用小，好用23333。我们就单独去下载这个包，就是在图中的Downloading网址，去下载下来。这里右上角最小化按钮和关闭按钮样式丢失了，原因在查找中····。
tauri嵌入自定义目录/文件，并在代码中读取文件内容的操作流程
09-21 1545
在绑定了文件之后，可以在js中访问嵌入的文件或者在rust中读取嵌入的文件内容，详细的配置操作如下。然后就可以在代码中读取这个文件了。
Tauri 一些配置
三季雨
02-02 1209
创建一个WixTools文件夹，然后将下载下来的安装包加压到这个文件下，记住解压后，删除安装包。接下来再运行刚才的打包命令即可。在C盘找到 Tauri文件夹，一般在。下新建 config文件 无后缀。，没有就新建 tauri文件夹。
【tauri】tauri的启动、运行与打包
飘逸者打瞌睡
06-29 3044
tauri 启动运行打包
使用Vite打包工具+vue前端框架+JavaScript语言+tauri工具开发一个简单的PC端应用程序
01-15
使用Vite打包工具+vue前端框架+JavaScript语言+tauri工具配合Rust开发一个简单的PC端应用程序 优点： 1. 打包后的应用程序比Electron打包的应用程序体积小10倍左右 2. 因为是Rust可以转为二进制语言调用系统API，...
go + tauri + vue.js 做的一款通信软件,基于websocket实现即时聊天.zip
05-24
go + tauri + vue.js 做的一款通信软件,基于websocket实现即时聊天 Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高...
大麦网演唱会抢票软件，一个基于 tauri + rust + vue 调用接口的抢票软件
04-06
# 抢票软件（大麦） 一个基于 tauri + rust + vue 构建的抢票软件，全部调用...4. 运行 `yarn tauri dev` 启动本地项目（如果windows系统，可能需要准备 tauri 需要的[环境](https://tauri.app/zh-cn/v1/guides/gettin
从零开始的 Tauri 开发 & 打包成 exe 【Windows 平台】
Lovely Ruby 的手账
02-03 8682
我翻了翻网上很多教程，并没有很全面的Windows下安装使用Tauri的笔记，鉴于之前踩过了很多坑，所以来写一篇笔记，希望需要的伙伴能够用Tauri顺利开发打包RustTauriexe。
rust react tauri app 现有前端项目打包(windows)
小Y的博客
04-05 3851
现有前端项目打包 环境配置 nodejs及相应包管理器（npm或yarn） rust 开发环境 WebView2 安装 下载地址https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section（注:windows11系统已预装WebView2 可不用安装） 已存在前端项目 项目初始化 首先进入已经写好的前端项目（my-app-tauri） cmd打开命令行安装Tauri CLI 依赖 yarn add -D
Tauri教程-进阶篇-第五节 嵌入外部资源
追逐自己的目标，感受生活的乐趣。Elcker
01-18 1035
在项目的开发中，我们可能会碰到使用项目外资源的情况，这种情况下在Tauri中是如何实现的，又有哪些注意事项，下面我们带着疑问开始本章的学习。
Tauri之嵌入固定版本Webview2
2ker的博客
09-07 2033
编译后生成的exe会将Webview2路径设置为webviewInstallMode指定的路径，比如上面的例子就是在exe同路径下；Tauri在Windows运行时依赖Webview2，不过现阶段Webview2的坑还是不少，而且会偷偷自动更新，这里介绍直接嵌入固定版本Webview2到Tauri应用的方法。解压cab到src-tauri下，比如：Microsoft.WebView2.FixedVersionRuntime.115.0.1901.203.x64。下载对应版本的cab文件。
tauri中加载本地文件图片或者下载网络文件图片后存储到本地，然后通过前端页面展示
09-26 1776
有一个需求是需要将本地上传的文件或者网络下载的文件存储到本地，并展示在前端页面上的。要想实现上述需求，需要三个步骤，配置相应的文件和文件夹访问权限，然后将文件存储到软件的相应目录中，再从目录中加载这个资源并展示。
【桌面应用开发】Rust+Tauri框架项目打包操作
linhao's 博客
05-03 4487
Tauri 提供了一个 tauricon 的命令，该命令可以输入图片路径（默认情况下为 ./app-icon.png，尺寸为 1240 x 1240 的 PNG ）来创建各种平台所需的所有图标。或者如果是第一次执行tauricon此命令则会提示需要安装命令，输入y回车等待安装就行​​生成好的图标默认放在 src-tauri/icons 目录下。
vue3和tauri直接下载Binary 数组的二进制文件内容到本地
07-17 2398
发送请求的时候，要加上响应类型：responseType: ResponseType.Binary。所以我们可以直接将这个返回的内容丢到writeBinaryFile里面就可以了。然后等返回的响应内容：发现是一个Binary 数组。
tauri tauri-plugin-store .dat 文件存储位置
y1638234804的博客
10-19 560
tauri-plugin-store .dat文件目录
tauri窗口设置壁纸
01-22
### 设置Tauri应用中的窗口背景图片 在Tauri应用程序中设置窗口背景图像可以通过CSS样式来实现。由于Tauri构建的应用程序本质上是一个Web视图容器，因此可以利用HTML和CSS的强大功能来自定义界面。 为了使背景图像生效，在`index.html`文件内指定的根元素上添加自定义类名或ID以便于通过CSS选择器定位[^1]： ```html <body class="background-image"> ``` 接着，在项目的`src-tauri/assets/css/style.css`或其他适当位置创建对应的CSS规则，定义所需的背景属性[^2]: ```css .background-image { background-image: url('/assets/images/background.jpg'); background-size: cover; background-position: center; } ``` 确保所引用的路径指向实际存在的资源文件，并且该文件位于项目结构内的正确目录下。对于上述例子而言，假设背景图片存储于`src-tauri/assets/images/`文件夹中[^3]。 如果希望进一步控制加载顺序或者仅当特定条件满足时才显示背景，则可以在JavaScript逻辑里动态调整DOM节点上的class列表[^4]。 ```javascript document.body.classList.add('show-background'); // 或者移除 document.body.classList.remove('hide-background'); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值