字玩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
相关推荐
威迪斯特3 小时前
Flask:轻量级Web框架的技术本质与工程实践
前端·数据库·后端·python·flask·开发框架·核心架构
Wentao Sun3 小时前
致敬软件创业者2026
笔记·程序人生
wuhen_n4 小时前
JavaScript内置数据结构
开发语言·前端·javascript·数据结构
大鱼前端4 小时前
为什么我说CSS-in-JS是前端“最佳”的糟粕设计?
前端
不爱吃糖的程序媛4 小时前
Capacitor:跨平台Web原生应用开发利器,现已全面适配鸿蒙
前端·华为·harmonyos
AC赳赳老秦4 小时前
2026国产算力新周期:DeepSeek实战适配英伟达H200,引领大模型训练效率跃升
大数据·前端·人工智能·算法·tidb·memcache·deepseek
CHU7290354 小时前
淘宝扭蛋机抽盒小程序前端功能解析:解锁趣味抽盒新体验
前端·小程序
-凌凌漆-4 小时前
【npm】npm的-D选项介绍
前端·npm·node.js
鹿心肺语4 小时前
前端HTML转PDF的两种主流方案深度解析
前端·javascript
深蓝海拓5 小时前
PySide6,QCoreApplication::aboutToQuit与QtQore.qAddPostRoutine:退出前后的清理工作
笔记·python·qt·学习·pyqt