当前位置: 首页>后端>正文

Tauri初步使用

Tauri

是一款替代Electron的产品。如果使用Electron的话就知道Electron打包体积很大,而Tauri打包体积很小。(当然,Tauri的功能不仅是打包)

Tauri的安装

前提条件

  1. 已经安装NodeJS
  2. 已经安装npm
    (NPM和NodeJS的安装方法请见百度)

安装

  1. 下载Visual Studio 2019/2022(2013以上的版本就可以)
    Visual Studio 2022下载地址:https://visualstudio.microsoft.com/zh-hans/vs/
  2. 下载完成后打开vs安装器勾选下面图片中的内容


    Tauri初步使用,第1张
    组件安装
  3. 等待安装完毕
  4. 下载Rust
    Rust下载地址(注意系统位数):https://www.rust-lang.org/zh-CN/tools/install
  5. Rust下载完毕后双击exe安装,全程直接默认即可,等待安装完毕。
  6. Win10及以下系统需要注意
    tauri需要WebView2才可以运行而Win10及以下并不会自带WebView2,因此需手动安装(如果你安装了一些软件可能会自动安装WebView2,那么这个时候安装程序会提示已经安装WebView2,此时这一步就可以跳过了):
    WebView2安装(选择常青版引导程序即可):https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/
  7. 在cmd中执行cargo install tauri-bundler,如果下载失败,执行cargo install tauri-bundler --force。(下载速度特慢,建议上网查找cargo的国内镜像源及配置方法)

至此,Tauri已经安装完毕。

Tauri和Vue结合

  1. 添加插件tauri-cli:
    (需要进入到项目中使用这个命令)
    vue add tauri
    
    等待添加完成
  2. 添加完成后,会让你一次输入项目名,窗口名等信息,可以先一律默认然后自己修改。等待tauri初始化完毕。重启编译器(如:Webstorm)
  3. 执行npm install --save-dev @tauri-apps/cli
  4. 打开package.json,将scripts下面的"tauri:build": "vue-cli-service tauri:build"改成"tauri:build": "tauri build""tauri:serve": "vue-cli-service tauri:serve"改成"tauri:serve": "tauri dev"
  5. 打开项目路径/src-tauri/tauri.conf.json文件,将
    "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "http://localhost:8080",
    "distDir": "../dist"
    }
    
    改成
    "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run serve",
    "devPath": "http://localhost:[项目的端口号]",
    "distDir": "../dist"
    }
    
    (不改会打包错误)
    "identifier": "com.tauri.dev"改成"identifier": "com.tauri.build"(不改会打出空包)
  6. 此时Vue和Tauri整合完毕,可以使用Vue作为前端,Tauri进行打包。

通过tauri:serve进行运行操作。
第一次打包速度会非常慢,但以后打包就很快了。
(如果运行失败可以执行这个命令试试,若无法解决可以看下面的踩坑)

后续动作

修改项目信息

项目信息配置文件就是前文提到的tauri.conf.json。这里面记载了项目的一些信息,打包时也会使用这个配置文件。因此,可以在这里对项目的打包做一些配置。

修改msi安装包的语言

默认打包出来的msi是英语的,如果要改成其他语言可以尝试下列方法:

  1. tauri.conf.json中的tauri->bundle->windows下添加"wix":{"language": ["en-US","zh-CN"]}
  2. 重新打包,这样就会生成2个安装包,一个英语,一个简中。所支持的语言代码见下面的链接:https://docs.microsoft.com/en-us/windows/win32/msi/localizing-the-error-and-actiontext-tables

踩坑

  1. tauri:serve无法运行或者运行一段时间后自动结束并报错,提示找不到命令'cargo'
    (1). 如果你已经安装了cargo且系统cmd当中可以使用cargo而在使用编译器运行的时候就出现这个问题
    解决:重启你的编译器(比如Webstorm必须彻底关闭并重启)
    (2). 如果你没有安装cargo ,请安装cargo(安装Rust时自动安装)
  2. 打包时出错,在下载WixTool时报错。
    第一次打包的话会下载一个组件包,因为网络问题可能无法下载导致打包失败,可以自己手动下载(速度很快)然后放到C:\User\你的用户名\AppData\Local\tauri\WixTools目录下,如果没有tauri和WixTools文件夹就创建创建这两个文件夹,(AppData文件夹需要开启“显示隐藏文件”才能看到)需要注意,文件夹的名称是固定的,不能修改!!!
    WixTools下载(复制到浏览器可以直接下载,或者将它复制然后粘贴到迅雷下载):https://github.com/wixtoolset/wix3/releases/download/wix3112rtm/wix311-binaries.zip
  3. 【2022-8-4更新】使用js中的confirm函数弹出的对话框在tauri打包后无效(“弹出确认框就跳转页面”、“弹出确认框无论点什么都是按照‘确认’处理”等问题都属于这种情况)
    Tauri有一套自己对于confirm的实现逻辑(不知道是vue插件tauri-cli导致的还是tauri本身就有一套特殊的机制,本人猜测是vue插件tauri-cli的可能性更大),原先JS的confirm函数返回的是Bool而使用tauri打包后confirm返回的是一个对象,你需要实现then方法才可以让confirm发挥应有的作用。
    举例:
    未使用tauri时的代码:
    let b=confirm("确定删除吗?")
    if(b){
      ...//当用户点击确认后执行的代码
    }
    
    使用tauri后就需要这样写:
    let b=confirm("确定删除吗?")
    b.then((res)=>{
      if(res){
        //当用户点击确认后执行的代码
      }else{
        //当用户点击取消后执行的代码
      }
    })
    
    目前不清楚其他框(alert等)的逻辑是否也变了。

评价

从这次经历看来,Tauri和Vue的集成并不是很好,而且和vue的整合有些繁琐,不过做为新起之秀还是值得期待的,因为Tauri打包的体积非常小,我有一个项目用Electron打包是120MB(安装包),用tauri打包就变成7MB(安装包)了,非常的nice。
但它有这么几个缺点:

  1. 打包时会占用大量的CPU(开一个Idea,运行后台,再开一个Webstorm,然后webstorm开始打包,此时你的电脑卡的跟动画片一样)
  2. 和Vue的集成十分繁琐
  3. 生态不够完善
  4. API文档比较混乱(尤其是“配置文件结构”那部分,特别混乱)

https://www.xamrdz.com/backend/3uh1935123.html

相关文章: