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

news2024/11/18 19:32:54

目录

 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.msiscr-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.安装打包生成的安装包

 

 

 

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

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

相关文章

【玩转CSS】这些高级技巧,你都会吗

🔥一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去🎶 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾 🦄 …

js去掉两个数组相同的元素、js删除数组中某一个对象、js快速查找数组中重复项下标

一、js去掉两个数组相同的元素 注意:这里并非是数组去重,数组去重是去掉一个数组中相同的元素,这里是比较两个数组,过滤掉二者相同的,留下不同的。 通过 some() 在对方数组里面查找相同元素,再利用filter…

老老实实的程序员该如何描述自己的缺点

答辩的时候,晋升的时候,面试的时候,你有没有经常遇到一个问题,那就是你觉得自己有什么缺点吗? 目录 1. 每个人都有缺点 2. 这道题在考什么? 3. 我之前是怎么回答的 4. 你可以这样回答试一试 5. 总结 …

浅析<router-view> v-slot事例

官方关于<router-link> 的 v-slot的相关介绍: https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot 并给出了一个例子&#xff1a; <router-view v-slot"{ Component, route }"><transition :name"route.meta.transition || fade&q…

selenium驱动Firefox安装和环境配置

目录 一、前言 二、版本 三、配置环境 四、在pycharm中添加selenium 五、测试代码&#xff0c;成功打开百度&#xff0c;则配置成功 一、前言 根据多篇文章总结了一下自己操作过程&#xff0c;主要是想记录一下。 二、版本 1.查看自己的Firefox的版本&#xff0c;在浏览器…

Web视频video自动播放(移动端及PC端)

做了个关于视频播放的活动&#xff0c;被各种问题折腾得精疲力竭。为了日后能够轻松点&#xff0c;特记录下出现的各种问题及解决方法。 活动要适配移动端&#xff08;IPhone、Android&#xff09;和PC端&#xff08;Chrome&#xff09; 需要解决的问题&#xff1a;移动端禁止全…

vue echarts饼图环形 (随着legend动态显示数据总数)

目录 1.安装echarts 2.引入echarts 3.创建要放入echarts实例的一个盒子 4.创建echarts实例 5.随着legend动态显示数据总数 效果视频 1.安装echarts npm install echarts --save 2.引入echarts 在 当前vue文件中引入 echarts 如下图所示&#xff1a; 3.创建要放入echa…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(搭建开发环境)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;二&#xff09;搭建开发环境项目演示1、创建项目2、配置路由3、添加 Vant UI 组件库4、移动端 rem 配置5、添加 iconfont 文字图标库6、二次封装 Axio…

Vue实现鼠标悬浮隐藏与显示图片效果 @mouseenter 和 @mouseleave事件

前言 前端vue 有个功能是鼠标移动到指定item上显示出来一个编辑和删除的图标 鼠标悬停在列表那么需要有悬浮显示的列表编辑和删除icon 文字不好描述&#xff0c;因为是web端录屏也比较麻烦 这里用截图说明 图片说明 功能实现 之前没做过这种效果&#xff0c;问了一下我的组长…

echarts 地图和柱状图结合(在地图上显示柱状图)

如图&#xff0c;需求要做一个在地图上显示柱状图的echarts图&#xff0c;但是百度了半天&#xff0c;发现很少有人发这种例子。这个代码也是借鉴的别人的文章&#xff0c;但需求肯定不完全一致&#xff0c;那我会根据我的需求把代码和注意事项发出来并解释。&#xff08;如果有…

ant-design-vue:基础使用

一、环境介绍 vue3tsant-design-vue 二、安装使用 2.1、安装脚手架工具 $ npm install -g vue/cli # OR $ yarn global add vue/cli 2.2、创建一个demo项目 2.2.1、创建项目 $ vue create antd-demo 2.2.2、 安装成功&#xff1a; 2.2.3、 项目目录及启动项目&#xff1a…

前端常见的几种布局方式,2分钟即可看完,全是干货。

前端常见的几种布局方式 提示&#xff1a;本篇文章不包含具体知识点&#xff0c;但是可以帮助小白了解到什么是布局 文章目录前端常见的几种布局方式前言参考文档一、前端常见的几种布局方式是什么&#xff1f;二、几大布局介绍1.浮动布局2.定位布局3.弹性布局4.栅格布局5.响应…

scss安装入门到使用高级语法

一.sass的基本概念 sass是css的"预处理器", 一门专门的css编程语言 增加了变量, 函数, 计算, 嵌套关系等用法,让css编写更简洁, 清晰. 二. scss的安装步骤 首先查询一下是否已经安装过sass, 在cmd中输入sass -v 或者 sass --version sass -vsass --version使用上…

【前端修炼之路】第一话 · 初识前端领域

写在前面 夏日炎炎&#xff0c;现在屋外的鸟儿叫的很欢&#xff0c;屋内刚刚组装完的主机风扇在轰轰作响&#xff0c;呜呜呜&#xff0c;怎么闻怎么看都不像是矿卡的显卡现在竟散发出阵阵甜味~哈哈哈哈开个玩笑&#xff0c;写个文章看个视频&#xff0c;这显卡的风扇应该都不带…

申请百度地图开发者AK和基本使用

前言 有需求就会有市场&#xff0c;百度地图也会开放一些免费的Api。来提供一些基本的地图服务。 今天我们讲解的是百度地图申请AK过程&#xff0c;和申请完之后基本的使用&#xff0c;方便大家日后有需要浏览。 AK-申请 1.首先我们学习一个技术最直接的是去看官方文档&…

ES6中新语法:解构

目录 解构 1.解构初了解 2.解构详细解析 2.1对象属性赋值形式 2.2变量的声明 2.3怎么解构 3.实践 3.1数组的解构 3.2对象的解构 3.3解构参数 4.总结 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#…

Element-UI--<el-switch>的@change回调函数的参数用法

原文网址&#xff1a;Element-UI--&#xff1c;el-switch&#xff1e;的change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Element-UI的<el-switch>的change回调函数的参数用法。 需求 2个switch组件&#xff0c;用同一个回调函数switch组件状…

Flask 与 Django 框架对比

详细分析了两种 Python Web框架&#xff1a; Flask 与 Django。从开发难易度、应用架构、性能、可扩展性以及适用范围等方面进行了详细说明。 Django 中级教程在 B 站上线&#xff0c;深入解析 Django 体系架构&#xff0c;实现从入门到精通的跨越。在线教程 前言 基于 Gith…

H5呼起微信支付(个人实践总结)

H5呼起微信支付存在两种场景 第一种&#xff1a;其他浏览器呼起微信支付。 第二种&#xff1a;微信内部呼起微信支付。 项目说明&#xff1a; 我这边的项目要求的两种方式均要适用。 产品要求是当支付失败时或者未支付情况是停留在支付订单页面&#xff0c;可再次发起订单请…

Vue3下使用Vuex(store)实现响应式全局变量

Vue3下使用Vuex store1 安装2 编写vuex配置文件2.1 目录及文件结构2.2 index.js文件2.3 编写vuex模块级参数文件2.4 index.js中引入模块级参数3 引入4 使用5 持久化5.1 vuex值存储在sessionStorge中5.1 vuex值存储在localStorge中注意本文记录了如何使用vuex建立响应式全局变量…