Vue3+Vue-i18n+I18N ALLY+VSCODE 自动翻译多国语言

ps: 效果图放前面,符合的往下看,不符合的出门右转,希望多多点赞评论支持。

请添加图片描述

  • 三种语言模式,分别是中文、英文、日文
    在这里插入图片描述
  • 批量翻译
    在这里插入图片描述
  • 最后的结果
    在这里插入图片描述

配置vue-i18n

1、下载安装vue-i18n,@9以上的版本。
2、创建对应文件夹
在这里插入图片描述
3、对应文件夹中代码如下

helper.ts

import type { LocaleType } from '@/types/i18n';
import { set } from 'lodash-es';export const loadLocalePool: LocaleType[] = [];export function setHtmlPageLang(locale: LocaleType) {document.querySelector('html')?.setAttribute('lang', locale);
}export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {cb(loadLocalePool);
}
export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {const obj: Recordable = {};Object.keys(langs).forEach((key) => {const langFileModule = langs[key].default;let fileName = key.replace(`./${prefix}/`, '').replace(/^\.\//, '');const lastIndex = fileName.lastIndexOf('.');fileName = fileName.substring(0, lastIndex);const keyList = fileName.split('/');const moduleName = keyList.shift();const objKey = keyList.join('.');if (moduleName) {if (objKey) {set(obj, moduleName, obj[moduleName] || {});set(obj[moduleName], objKey, langFileModule);} else {set(obj, moduleName, langFileModule || {});}}});return obj;
}

setupI18n.ts

import type { App } from 'vue';
import type { I18n, I18nOptions } from 'vue-i18n';
import { createI18n } from 'vue-i18n';
import { setHtmlPageLang, setLoadLocalePool } from './helper';
import { useLocaleStore } from '@/store/modules/locale'export let i18n: ReturnType<typeof createI18n>;
async function createI18nOptions(): Promise<I18nOptions> {const store = useLocaleStore()const locale = store.getLocalInfoconst defaultLocal = await import(`./lang/${locale}.ts`);const message = defaultLocal.default?.message ?? {};setHtmlPageLang(locale);setLoadLocalePool((loadLocalePool) => {loadLocalePool.push(locale);});return {legacy: false, //false:新版API locale,//当前语言fallbackLocale: 'zh_CN', //找不到语言环境,回滚到中文messages: {[locale]: message, //对应的语言环境具体值},availableLocales: ['zh_CN', 'en'],//包含的语言种类sync: true,  //是否从全局继承语言环境silentTranslationWarn: true, //true:关闭翻译警告missingWarn: false,//是否显示缺失翻译的警告信息silentFallbackWarn: true,//忽略回退警告};
}
export async function setupI18n(app: App) {const options = await createI18nOptions();i18n = createI18n(options) as I18n;app.use(i18n);
}

useLocale.ts

import type { LocaleType } from '@/types/i18n';
import { i18n } from './setupI18n';
import { unref, computed } from 'vue';
import { useLocaleStore } from '@/store/modules/locale'
import { loadLocalePool, setHtmlPageLang } from './helper';
interface LangModule {message: Recordable;dateLocale: Recordable;dateLocaleName: string;
}function setI18nLanguage(locale: LocaleType) {const store = useLocaleStore()if (i18n.mode === 'legacy') {i18n.global.locale = locale;} else {(i18n.global.locale as any).value = locale;}store.setLocaleInfo({ locale })setHtmlPageLang(locale);
}export function useLocale() {const store = useLocaleStore()const getLocale = computed(() => store.getLocalInfo);const getShowLocalePicker = computed(() => store.getShowPicker);const getAntdLocale = computed((): any => {return i18n.global.getLocaleMessage(store.getAntdLocale);});async function changeLocale(locale: LocaleType) {const globalI18n = i18n.global;const currentLocale = unref(globalI18n.locale);if (currentLocale === locale) {return locale;}if (loadLocalePool.includes(locale)) {setI18nLanguage(locale);return locale;}const langModule = ((await import(`./lang/${locale}.ts`)) as any).default as LangModule;if (!langModule) return;const { message } = langModule;globalI18n.setLocaleMessage(locale, message);loadLocalePool.push(locale);setI18nLanguage(locale);return locale;}return {getLocale,getShowLocalePicker,changeLocale,getAntdLocale,};
}

4、创建全局当前语言类型值,如果需要刷新保持,还应将值保存到localStorage中。

locale.ts

import { defineStore } from 'pinia';
import type { LocaleType } from '@/types/i18n'
type LocaleState = {localInfo: LocaleType,availableLocales: LocaleType[],showPicker: boolean,antdLocale: LocaleType
}
type SetLocalInfoOpt = {locale: LocaleType,
}
export const useLocaleStore = defineStore({id: 'app-locale',state: (): LocaleState => ({localInfo: 'zh_CN',showPicker: false,availableLocales: [],antdLocale: 'zh_CN'}),getters: {getLocalInfo(): LocaleType {return this.localInfo},getShowPicker(): boolean {return this.showPicker},getAntdLocale(): LocaleType{return this.antdLocale}},actions: {setLocaleInfo({ locale }: SetLocalInfoOpt) {this.localInfo = locale},}
})

5、lang文件夹下创建对应翻译的入口en.ts\ja.ts\zh_CH.ts

import { genMessage } from '../helper';
import antdLocale from 'ant-design-vue/es/locale/en_US';//更改对应的类型const modules:Record<string, Record<string, any>> = import.meta.globEager('./en/**/*.json'); //更改对应的类型
export default {message: {...genMessage(modules, 'en'),//更改对应的类型antdLocale,},dateLocale: null,dateLocaleName: 'en',//更改对应的类型
};

5、main.ts中引入

import { setupI18n } from '@/locales/setupI18n';
await setupI18n(app);

6、页面中引入

<template><p><a-button @click="onChange('zh_CN')">中文</a-button><a-button @click="onChange('en')">英文</a-button><a-button @click="onChange('ja')">日文</a-button></p><div>{{ t('common.a') }}</div><div>{{ t('common.b') }}</div><div>{{ t('common.c') }}</div><div>{{ t('common.d') }}</div><div>{{ t('common.e') }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from '@/hooks/web/useI18n';
import type { LocaleType } from '@/types/i18n';
import { useLocale } from '@/locales/useLocale';
export default defineComponent({setup() {const { changeLocale } = useLocale();const { t } = useI18n();async function onChange(local: LocaleType) {await changeLocale(local as LocaleType);}return {t,onChange}}
})
</script>
<style lang="less"></style>

至此,页面上的语言切换可以了。接下来是如何自动翻译

VSCODE插件I18n Ally

1、插件市场下载
在这里插入图片描述
2、在.vscode下新建settings.json文件
在这里插入图片描述
3、在配置文件中新增关于i18n的设置。

{"i18n-ally.localesPaths": ["src/locales/lang"], // 翻译文件路径 (自动生成) 相对于项目根目录的语言环境目录路径"i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}","i18n-ally.enabledParsers": ["json"],"i18n-ally.sourceLanguage": "zh-CN","i18n-ally.displayLanguage": "zh-CN","i18n-ally.enabledFrameworks": ["vue","react"],// 如下须要手动配置"i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested:嵌套式  flat:扁平式)"i18n-ally.sortKeys": true,"i18n-ally.namespace": true,"i18n-ally.translate.engines": ["google","deepl"], // 翻译器"i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
}

备注“i18n-ally.localesPaths”这个是你翻译文件的路径、“i18n-ally.translate.engines”翻译器,需要科学上网(fq)。

4、配置成功后,鼠标移动上去会显示当前翻译结果,失败的可以关闭编译器重启。
在这里插入图片描述
5、批量翻译,点击编译器左下角翻译的图标,然后再翻译进度中找到,未翻译的语言。空值右边对应有个地球图标。单击翻译即可。

在这里插入图片描述

有些人写的翻译是json文件有的是TS文件,注意配置的时候和lang文件夹下面的入口文件
不要写错了。
写在最后,有问题可评论,可私聊。欢迎讨论。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/100587.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双键网络对讲求助模块

SV-6005 双键网络对讲求助模块 一、描述 SV-6005模块是我司的一款壁挂式一键求助对讲模块&#xff0c;具有10/100M以太网接口&#xff0c;其接收网络的音频数据&#xff0c;实时解码播放&#xff0c;还配置了麦克风输入和扬声器输出。SV-6005模块可实现对讲、广播、监听等功能…

Qt下SVG格式图片应用

SVG格式图片介绍 svg格式图片又称矢量图&#xff0c;该种格式的图片不同于png等格式的图片&#xff0c;采用的并不是位图的形式来组织图片&#xff0c;而是采用线条等组织图片&#xff0c;svg格式是图片的文件格式是xml&#xff0c;可以通过文件编译器打开查看svg格式内容。 …

Mock接口测试

什么是mock? 测试桩&#xff0c;模拟被测对象的返回&#xff0c;用于测试 通常意义的mock指的就是mock server, 模拟服务端返回的接口数据&#xff0c;用于前端开发&#xff0c;第三方接口联调 为什么要mock? 1. 解决依赖问题&#xff1a;当我们测试一个接口或者功能模块…

【迪文屏幕】开发资料

1、应用手册 《T5L DGUSII 应用开发指南202306.pdf》&#xff0c;这个文档上面&#xff0c;详细介绍了各种控件的使用方法。 这个文档可以在官方论坛上找到&#xff0c;也可以直接在csdn上下载。 2、DGUS Tool 界面设计工具&#xff0c;根据所选屏幕的系统选择对应的工具&am…

andriod studio 手机模拟器中的文件导出方法

阅读前请看一下&#xff1a;我是一个热衷于记录的人&#xff0c;每次写博客会反复研读&#xff0c;尽量不断提升博客质量。文章设置为仅粉丝可见&#xff0c;是因为写博客确实花了不少精力。希望互相进步谢谢&#xff01;&#xff01; 文章目录 阅读前请看一下&#xff1a;我是…

Lua03——开发环境搭建

1 安装开发插件 在 idea 或 vscode 中安装 lua 的开发插件 EmmyLua 2 创建工程 在 idea 中创建一个新的工程 工程的类型选择 lua 输入工程名及目标目录 在工程结构的SDK中设置lua在本地安装目录 在工程结构的modules中选择 lua 3 编写第一个lua程序 在工程下添加程序包&#…

WordPress(4)关于网站的背景图片更换

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、更改的位置1. 红色区域是要更换的随机的图片二、替换图片位置三.开启随机数量四.结束前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也…

面试中的问题提问:如何通过提问展示你的主动性

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Windows11 设置移动热点 共享WIFI无线上网

Windows11 设置移动热点 共享WIFI无线上网 打开设置 键盘同时按下 windows i 在设置中点击 网络和 internet 移动热点 编辑移动热点参数 移动热点无接入上网设备 移动热点接入上网设备

string容器的常用操作

string容器的常用操作 一、C语言中的字符串二、string容器1、概念2、特点 三、string类对象的常见构造1、构造2、实际构造函数3、测试代码4、运行结果 四、赋值运算符1、类型2、作用3、测试代码4、运行结果 五、string类对象的容量操作1、成员函数2、测试代码3、说明4、运行结果…

Redis——认识Redis

简单介绍 Redis诞生于2009年&#xff0c;全称是Remote Dictionary Server&#xff0c;远程词典服务器&#xff0c;是一个基于内存的键值型NoSQL数据库。 特征 键值&#xff08;Key-value&#xff09;型&#xff0c;value支持多种不同数据结构&#xff0c;功能丰富单线程&…

简明SQL条件查询指南:掌握WHERE实现数据筛选

条件查询是用于从数据库中根据特定条件筛选数据行的一种方式&#xff0c;它避免了检索整个表中的数据。通常&#xff0c;使用 WHERE 子句来定义过滤条件&#xff0c;只有符合这些条件的数据行才会被返回。 SQL中的运算符有&#xff1a;、!、<、> 等&#xff0c;用于进行…