rust react tauri app 现有前端项目打包(windows)

现有前端项目打包

环境配置

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-apps/cli
# OR
npm install -D @tauri-apps/cli

执行完毕在package添加

{// This content is just a sample"scripts": {"tauri": "tauri"}
}

附图

安装@tauri-apps/api 依赖

yarn add @tauri-apps/api
# OR
npm install @tauri-apps/api

初始化 app 这里主要是生成src-tauri文件夹及其内容

yarn tauri init
或
npm run tauri init
或
cargo tauri init
或
tauri init

目录如下

└── src-tauri├── .gitignore├── Cargo.toml├── rustfmt.toml├── tauri.conf.json├── icons│   ├── 128x128.png│   ├── 128x128@2x.png│   ├── 32x32.png│   ├── Square107x107Logo.png│   ├── Square142x142Logo.png│   ├── Square150x150Logo.png│   ├── Square284x284Logo.png│   ├── Square30x30Logo.png│   ├── Square310x310Logo.png│   ├── Square44x44Logo.png│   ├── Square71x71Logo.png│   ├── Square89x89Logo.png│   ├── StoreLogo.png│   ├── icon.icns│   ├── icon.ico│   └── icon.png└── src├── build.rs├── cmd.rs└── main.rs

附图

启动

在项目根目里这里是my-app-tauri 执行

npm run start //启动前端目录

重开一个cmd执行（同样是根目录）

npm run  tauri dev

打包

npm run  build //先打包前端页面
npm run  tauri build //打包生成二进制

编辑时下载info: Downloading https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip如果下载不了可手动下载并解压到项目
C:\Users\username\AppData\Local\tauri目录

最后赋一张图

rust react tauri app 现有前端项目打包(windows)相关推荐

如何部署前端react项目到服务器,Vue、React前端项目打包部署
前端单页面应用部署前端打包上线部署方案之 hash路由模式对于hash路由模式打包的单页面应用,直接发布到服务器,使用nginx指向到对应文件目录即可,通用配置一般如下: location / { ...
React、Vue等前端项目彻底卸载ServiceWorker，亲测有效
前端项目遇到的问题每次前端项目在本地开发没事,一旦发布到线上就需要用户手动清理浏览器缓存,让用户总是吐槽,百度搜了很多文章都没找到解决方案,最终在钉钉源码中找到了解决方案.话不多说,直接上图: 1. ...
前端项目打包优化及上线
前端项目优化及上线根据自己项目实际,进行webpack配置,这里只是一个参考,关于上线很多功能作为了解. 优化问题项目优化策略步骤及详解安装配置 1.生成打包报告=>为了直观发现项目中的问题 ...
使用filemanager-webpack-plugin将前端项目打包成zip压缩包
使用filemanager-webpack-plugin插件将前端的dist目录打包成zip压缩包,省去手动压缩,进一步可以配合 idea 的Cloud Toolkit插件或者jekenis进行自动 ...
浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
将现有android项目打包成aar包供第三方应用调用
1.打包之后生成的文件地址: *.jar:库/build/intermediates/bundles/debug(release)/classes.jar *.aar:库/build/outputs/ ...
layui前端项目打包方法_layui封装模块基础教程
layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块. 平常使用中,ajax可以说使用广泛,所以这里我们添加 ...
使用 Electron 给前端项目打包成exe
还是接着上一篇的例子,在项目目录输入这个命令上一篇文章地址:https://juejin.im/post/6889422940928999438 使用electron-packager打包成exe ...
前端项目如何打包成手机app？
前端项目如何打包成手机app 阐述难点及解决方式具体使用步骤创建5+app空项目删除5+app默认的项目结构移动并进行基础设置发行及云打包查看及下载阐述前端是做什么的?写网页的?不, ...