【调试笔记-20240622-Windows-Tauri+Vue支持多语言界面的调试】

调试笔记-系列文章目录

调试笔记-20240622-Windows-Tauri+Vue支持多语言界面的调试

---

---

前言

本文记录在 Windows 环境下调试 Tauri 程序，通过vue-i18n实现界面多语言支持的功能。

实验使用的电脑如下：

CPU：

Intel Core i5 8265U
1

操作系统：

Microsoft Windows 10  Professional (x64), Version 22H2, Build 19045.4412
1

---

一、调试环境

---

操作系统：Windows 10 专业版

操作系统详细信息如下：

Microsoft Windows 10  Professional (x64), Version 22H2, Build 19045.4412
1

---

调试环境

• Windows 系统按照 Tauri 快速指南设置好开发环境。

参考【Tauri 快速上手】

---

调试目标

实现应用程序界面的多语言支持。

---

二、调试步骤

搜索相似问题

1、Tauri 的官网有相关接口的示例
https://v2.tauri.app/plugin/dialog/#open-a-file-selector-dialog

操作步骤

安装插件

1、执行以下命令，完成自动安装：

pnpm tauri add dialog
1

2、手动安装，执行以下命令：

添加 rust crate

cargo add tauri-plugin-dialog
1

初始化 tauri lib，在 lib.rs 中添加

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        // Initialize the plugin
        .plugin(tauri_plugin_dialog::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
1
2
3
4
5
6
7
8

添加 JS/TS 支持

pnpm add @tauri-apps/plugin-dialog
1

3、设置权限

修改 src-tauri\capabilities\default.json ，添加以下内容：

    "dialog:allow-open"
1

添加测试页面

Test.vue 文件内容：

<script setup lang="ts">
import { ref } from 'vue';
import { open } from '@tauri-apps/plugin-dialog';
import { appLocalDataDir } from '@tauri-apps/api/path';

import { Button } from '@/components/ui/button'

const folderPath = ref('');

async function getAppLocalDataDir() {
  await appLocalDataDir().then((res: string) => {
    folderPath.value = res;
  })
}

async function getOpen() {
  await open({
    directory: true,
    multiple: true,
    defaultPath: folderPath.value,
  });
}

function handleTestFileChange() {
  getAppLocalDataDir()
  getOpen()
}
</script>

<template>
  <Button type="button" @click="handleTestFileChange">TestFileChange</Button>
  <p>选择的文件夹路径: {{ folderPath }}</p>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

构建并执行

执行命令：

pnpm tauri dev
1

出现程序界面，测试对话插件。

---

三、应用场景

快速开发原生的桌面工具

---

四、参考资料

1、Tauri 参考手册

2、@tauri-apps/plugin-dialog

3、8 Tips for Creating a Native Look and Feel in Tauri Applications

---

总结

本文记录在 Windows 环境下调试 Tauri 程序，通过vue-i18n实现界面多语言支持的功能。