调试笔记-系列文章目录

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



前言

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

实验使用的电脑如下:

CPU:

Intel Core i5 8265U

操作系统:

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

一、调试环境


操作系统:Windows 10 专业版

操作系统详细信息如下:

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

调试环境

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

参考【Tauri 快速上手


调试目标

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

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

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

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


二、调试步骤

搜索相似问题

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

操作步骤

安装插件

1、执行以下命令,完成自动安装:

pnpm tauri add dialog

2、手动安装,执行以下命令:

添加 rust crate

cargo add tauri-plugin-dialog

初始化 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");
}

添加 JS/TS 支持

pnpm add @tauri-apps/plugin-dialog

3、设置权限

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

    "dialog:allow-open"

添加测试页面

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>

构建并执行

执行命令:

pnpm tauri dev

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


三、应用场景

快速开发原生的桌面工具


四、参考资料

1、Tauri 参考手册

2、@tauri-apps/plugin-dialog

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


总结

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

06-26 08:24