字玩FontPlayer开发笔记9 Tauri2打包应用

字玩FontPlayer开发笔记9 Tauri2打包应用

字玩FontPlayer是笔者开源的一款字体设计工具,使用Vue3 + ElementUI开发,源代码:github | gitee

笔记

字玩目前是用Electron进行桌面端应用打包,但是性能体验不太好,一直想替换成Tauri。Tauri的功能和Electron类似,都可以把前端代码打包生成桌面端(比如Windows和Mac)应用。Tauri只使用系统提供的WebView,不像Electron一样内置Chromium和Node.js,性能体验更佳。

最近开始着手替换成Tauri,前几天把基本功能迁移之后,今天开始打包测试,记录一下。

Tauri配置

在tauri-src/icons中将默认图标替换成自己的图标,然后在配置文件中修改一下图标配置。我的配置:

json 复制代码
{
  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
  "productName": "字玩",
  "version": "0.1.0",
  "identifier": "com.fontplayer.app",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "windows": [
      {
        "title": "字玩",
        "width": 1280,
        "height": 800,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/icon.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}
打包命令
bash 复制代码
npx tauri build

运行后系统会自动执行前端部分的打包,然后在利用生成的dist打包Tauri应用

打包MacOS Intel芯片应用

npx tauri build只打包默认的应用,有时我们还需要打包特定的应用。比如对Mac端笔者需要分别打包Intel芯片和Apple芯片的应用等,这时候我们需要添加特定Target。

添加Target:

bash 复制代码
rustup target add x86_64-apple-darwin

执行打包命令:

bash 复制代码
npx tauri build --target x86_64-apple-darwin
打包MacOS Apple芯片应用

npx tauri build只打包默认的应用,有时我们还需要打包特定的应用。比如对Mac端笔者需要分别打包Intel芯片和Apple芯片的应用等,这时候我们需要添加特定Target。

添加Target:

bash 复制代码
rustup target add aarch64-apple-darwin

执行打包命令:

bash 复制代码
npx tauri build --target aarch64-apple-darwin
打包Windows端64位应用

如果在Mac电脑中打包Windows应用的话,首先需要安装工具链:

bash 复制代码
brew install mingw-w64

添加Target:

bash 复制代码
rustup target add x86_64-pc-windows-gnu

执行打包命令:

bash 复制代码
npx tauri build --target x86_64-pc-windows-gnu
相关推荐
code_ing-1 小时前
【Linux】命令行参数与环境变量
linux·c++·windows·笔记
wangjialelele1 小时前
Qt中的常用组件:QWidget篇
开发语言·前端·c++·qt
乔冠宇1 小时前
vue需要学习的点
前端·vue.js·学习
用户47949283569151 小时前
同样是 #,锚点和路由有什么区别
前端·javascript
Hero_11271 小时前
在pycharm中install不上需要的包
服务器·前端·pycharm
爱上妖精的尾巴2 小时前
5-26 WPS JS宏数组元素添加删除应用
开发语言·前端·javascript·wps·js宏
是谁眉眼2 小时前
wpsapi
前端·javascript·html
谅望者2 小时前
Flexbox vs Grid:先学哪一个?CSS 布局完全指南(附可视化示例)
前端·css·html·css3·css布局·css flexbox·css grid
老华带你飞2 小时前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·商城推荐系统
JS.Huang2 小时前
【JavaScript】Pointer Events 与移动端交互
前端·javascript