调试笔记-系列文章目录
调试笔记-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 快速上手】
调试目标
实现应用程序界面的多语言支持。
二、调试步骤
搜索相似问题
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
出现程序界面，测试对话插件。
三、应用场景
快速开发原生的桌面工具
四、参考资料
3、8 Tips for Creating a Native Look and Feel in Tauri Applications
总结
本文记录在 Windows 环境下调试 Tauri 程序，通过vue-i18n实现界面多语言支持的功能。