tauri 打包现有React 项目(window)

news2024/11/15 13:50:50

注意事项:1.此项目没有路由,2.没有 API请求
环境配置 请看文档
tauri 文档
第一步:在需要打包的项目根目录执行命令

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

第二步:在 package.json scripts 中添加 tauri

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "tauri": "tauri" //添加此代码
  },

第三步:在项目根目录 初始化 tauri ,一直回车就行,需要修改参数就在配置文件修改即可。

npm run tauri init

初始化完成 会出现一个 src-tauri的文件夹。
第四步: 启动项目执行命令

npm run tauri dev

注意事项:
1)如果出现如下错误

npm ERR! Missing script: "dev"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\14991\AppData\Local\npm-cache\_logs\2023-02-18T02_04_03_466Z-debug-0.log
       Error The "beforeDevCommand" terminated with a non-zero status code.

原因是 在 tauri.conf.json 配置文件中 beforeDevCommand 参数 的 值错误,应该是React 项目 package.json 里的 项目启动命令。
例:我的是 “npm run start ”

 "scripts": {
    "start": "react-scripts start", //我的启动命令
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "tauri": "tauri"
  },

//修改后的 tauri.conf.json

"build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run start", //修改后的值
    "devPath": "http://localhost:3000",
    "distDir": "../build"
  },

beforeBuildCommand 同理 记得修改
重新执行 npm run tauri dev (会下载一些包不要急,时间会挺长)
结果会出现一个窗口 成功
在这里插入图片描述
第四步打包:执行命令

npm run 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.
 解决 修改 tauri.conf.json 在文件中的 identifier参数,修改为非默认值。
 

重新执行命令(等待打包)
完成打包
在这里插入图片描述

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

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

相关文章

使用canvas实现腾讯自选股K线图

前言 平常为了方便看行情就会打开小程序看走势,作为一个开发在看腾讯自选股的日K时就会在想这个玩意是怎么弄的呢?下面我就用h5来实现一个最简K线图。 K线的构成以及画法 K线又称阴阳线、棒线、红黑线或蜡烛线。K线是一条柱状的线条,由实体…

[数据结构]---八大经典排序算法详解

🐧作者主页:king&南星 🏰专栏链接:c 文章目录一、八大排序算法复杂度对比二、基于比较的排序算法1.冒泡排序2.选择排序3.插入排序4.希尔排序5.直观感受四种算法的时间复杂度三、基于非比较的排序算法1.基数排序2.箱(桶)排序四…

MySQL 实战记录篇

记录一下在MySQL实战中简单的笔记 MySQL的逻辑架构,一条查询语句是怎么执行的? MySQL 的架构共分为两层:Server 层和存储引擎层 简单的架构图: 连接器:用来和mysql服务器建立连接,tcp三次握手&#xff0…

SpringCloud系列(十三)[分布式搜索引擎篇] - ElasticSearch 的概念及 Centos 7 下详细安装步骤

打开淘宝, 搜索 狂飙 会出现各种价格有关狂飙的书籍, 当然也有高启强同款的孙子兵法!!! 如下图所示: 那么面对海量的数据, 如何快速且准确的找到我们想要的内容呢? 淘宝界面已经可以按照综合排序 / 销量 / 信用 / 价格等进行筛选, 是如何做到的呢? ElasticSearch 11 Elastic…

实战一(下):如何利用基于充血模型的DDD开发一个虚拟钱包系统?

上一节课,我们做了一些理论知识的铺垫性讲解,讲到了两种开发模式,基于贫血模型的传统开发模式,以及基于充血模型的DDD开发模式。今天,我们正式进入实战环节,看如何分别用这两种开发模式,设计实现一个钱包系统。话不多说,让我们正式…

python自制PDF转换.PNG格式图片(按每页生成图片完整源码)小工具!

使用PyQt5应用程序制作PDF转换成图片的小工具,可以导入PDF文档后一键生成对应的PNG图片。 PDF图片转换小工具使用的中间件: python版本:3.6.8 UI应用版本:PyQt5 PDF文件操作非标准库:PyPDF2 PNG图片生成库&#xff1…

VINS-Mono/Fusion与OpenCV去畸变对比

VINS中没有直接使用opencv的去畸变函数,而是自己编写了迭代函数完成去畸变操作,主要是为了加快去畸变计算速度 本文对二者的结果精度和耗时进行了对比 VINS-Mono/Fusion与OpenCV去畸变对比1 去畸变原理2 代码实现2.1 OpenCV去畸变2.2 VINS去畸变3 二者对…

压缩20M文件从30秒到1秒的优化过程

压缩20M文件从30秒到1秒的优化过程 有一个需求需要将前端传过来的10张照片,然后后端进行处理以后压缩成一个压缩包通过网络流传输出去。之前没有接触过用Java压缩文件的,所以就直接上网找了一个例子改了一下用了,改完以后也能使用&#xff0…

(考研湖科大教书匠计算机网络)第四章网络层-第九节:虚拟专用网与网络地址转换

获取pdf:密码7281专栏目录首页:【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一:虚拟专用网(1)虚拟专用网是什么(2)虚拟专用网如何分配IP地址(3)例子&#x…

【JAVA八股文】框架相关

框架相关1. Spring refresh 流程2. Spring bean 生命周期3. Spring bean 循环依赖解决 set 循环依赖的原理4. Spring 事务失效5. Spring MVC 执行流程6. Spring 注解7. SpringBoot 自动配置原理8. Spring 中的设计模式1. Spring refresh 流程 Spring refresh 概述 refresh 是…

深度学习(1)神经网络基础

要学习深度学习,那么首先要熟悉神经网络(Neural Networks,简称NN)的一些基本概念。当然,这里所说的神经网络不是生物学的神经网络,我们将其称之为人工神经网络(Artificial Neural Networks&…

海豚调度2.0.5 星环驱动包踩坑(二)worker服务正常、zk注册正常,心跳时间不更新,也不执行任务,任务一直处于执行中状态

目录背景问题记录20230206 发现服务启动失败20230215 有一台worker不执行作业,其它均正常问题解决问题思考背景 之前分享过海豚调度2.0.5连接星环库使用记录,后来说存储过程又出现了超时的情况,原因是因为调度星环驱动包和生产星环库驱动包不…

ES 异常写入解决流程

问题说明 一天下午,在北京客户现场的同学反馈我们elasticsearch出现的大量的异常,他反馈说他使用多线程写入大量数据到elasticsearch集群时,隔一段时间之后就会出现CircuitBreakingException,多尝试几次后,他就把问题反…

基于微信小程序的微信社团小程序

文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9 浏览器…

JavaEE|网络原理·上

文章目录一、网络发展史1.独立模式2.网络互联3.局域网(LAN)4.广域网(WAN)局域网组网的方式①基于网线直连②基于集线器(hub)组建③基于交换机(switch)组建④基于交换机和路由器组建二、网络通信基础1.ip地址…

Winform控件开发(14)——NotifyIcon(史上最全)

前言: 先看个气泡提示框的效果: 代码如下: 在一个button中注册click事件,当我们点击button1时,就能显示气泡 private void button1_Click(object sender, EventArgs e){notifyIcon1.Visible = true;notifyIcon1

【论文速递】ICLR2018 - 用于小样本语义分割的条件网络

【论文速递】ICLR2018 - 用于小样本语义分割的条件网络 【论文原文】:CONDITIONAL NETWORKS FOR FEW-SHOT SEMANTIC SEGMENTATION(Workshop track - ICLR 2018) 【作者信息】:Kate Rakelly Evan Shelhamer Trevor Darrell Alexe…

PyTorch - Conv2d 和 MaxPool2d

文章目录Conv2d计算Conv2d 函数解析代码示例MaxPool2d计算函数说明卷积过程动画Transposed convolution animationsTransposed convolution animations参考视频:土堆说 卷积计算 https://www.bilibili.com/video/BV1hE411t7RN 关于 torch.nn 和 torch.nn.function t…

Reverse入门[不断记录]

文章目录前言一、[SWPUCTF 2021 新生赛]re1二、[SWPUCTF 2021 新生赛]re2三、[GFCTF 2021]wordy[花指令]四、[NSSRound#3 Team]jump_by_jump[花指令]五、[NSSRound#3 Team]jump_by_jump_revenge[花指令]前言 心血来潮,想接触点Reverse,感受下Reverse&am…

网络编程(一)

网络编程 文章目录网络编程前置概念1- 字节序高低地址与高低字节高低地址:高低字节字节序大端小端例子代码判断当前机器是大端还是小端为何要有字节序字节序转换函数需要字节序转换的时机例子一例子二2- IP地址转换函数早期(不用管)举例现在与字节序转换函数相比:**…