字玩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
相关推荐
m0_528723817 分钟前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer7 分钟前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL13 分钟前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树14 分钟前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
JustHappy37 分钟前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪1 小时前
刷刷题16
前端·javascript·面试
羊小猪~~1 小时前
MYSQL学习笔记(九):MYSQL表的“增删改查”
数据库·笔记·后端·sql·学习·mysql·考研
yuanbenshidiaos1 小时前
【数据挖掘】数据仓库
数据仓库·笔记·数据挖掘
祈澈菇凉2 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇2 小时前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js