Logo

Vue3中,国际化插件vue-i18n使用记录,配合VSCode自动化翻译插件i18n Ally

photo

2023年10月25日

vue-i18n

版本说明:

vue: 3.0.0+

vue-i18n: 9.x版

安装

npm install vue-i18n@9
// 或者
yarn add vue-i18n@9

创建实例

  1. src 目录下新建目录 lang,存放i18n的配置。

    新建目录名称:lang(语言)、locales(语系设定)、i18n,这些名称都可被VSCode图标插件(vscode-icons)检测到并美化。

  2. lang目录下,新建index.js文件,引入vue-i18n

  3. 语言的配置信息放在另外的文件中。

    例如,设置英文中文两种语言类型:新建存放中文配置的文件zh.json和存放英文的文件en.json; 然后在index.js中引入。
    在这里插入图片描述

vue-i18n使用createI18n创建实例,下面代码新建了一个i18n实例:

文件位置:src/lang/index.js

import { createI18n } from "vue-i18n";
import EN from "./en";
import ZH from "./zh";

const messages = {
  zh: {
    ...ZH,
  },
  en: {
    ...EN,
  },
};

const i18n = createI18n({
  locale: "zh", // 设置当前语言类型
  legacy: false, // 如果要支持compositionAPI,此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages,
});

export default i18n;

语言配置文件

// zh.json
{
  "hello": "你好"
}


// en.json
{
  "hello": "hello"
}

全局注册

i18n实例在项目中使用前,需要在入口文件中注册一下。

进入main.js文件,引入并注册i18n

import { createApp } from 'vue'

import App from './App.vue'
import i18n from './lang'

const app = createApp(App)

app.use(i18n)

app.mount('#app')

使用

模板中使用

template模板中使用,这个比较简单,直接使用全局方法$t

<template>
  {{ $t('hello') }}
</template>

页面中正常显示:你好

切换英文:src/lang/index.js

const i18n = createI18n({
  locale: "en", // 设置当前语言类型
  legacy: false, // 如果要支持compositionAPI,此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages,
});

页面中正常显示:hello

JS中使用

<template>
  {{ $t('hello') }}
</template>
<script>
import { getCurrentInstance } from "vue";
import i18n from '@/lang'; // 引入i8n实例
import { useI18n } from 'vue-i18n';
export default {
  setup() {
    // 第一种方法:获取i18n实例对象 t 的方法1
    const { proxy } = getCurrentInstance();
    const t1 = proxy.$t('hello');
    console.log(t1);

    // 第二种方法:获取i18n实例对象 t 的方法1
    const t2 = i18n.global.t('hello');
    console.log(t2);


    // 第三种方法:获取i18n实例对象 t 的方法3
    const { t } = useI18n() // 解构出t方法
    const t3 = t('hello');
    console.log(t3);
    return {};
  },
  mounted() {
    // 第四种方法:获取i18n实例对象 t 的方法4
    const t4 = this.$t('hello');
    console.log(t4);
  },
};
</script>

语言切换

效果

在这里插入图片描述

代码

<template>
  <label for="lang-select">Change language:</label>
  <select name="lang" id="lang-select" @change="changeLang">
    <option value="en">English</option>
    <option value="zh" selected>简体中文</option>
  </select>
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td>模板中使用</td>
      <td> {{ $t('hello') }}</td>
    </tr>
    <tr>
      <td>JS中响应式切换语言</td>
      <td> {{ hel }}</td>
    </tr>
    <tr>
      <td>当前语言类型</td>
      <td> {{ currentLang }}</td>
    </tr>
  </table>
</template>
<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale, t } = useI18n();
const changeLang = parameter => {
  const lang = parameter.target.value;
  locale.value = lang; // 切换语言
  localStorage.setItem('LANG', lang); // 本地存储当前语言类型
}
// 获取当前语言类型
const currentLang = computed(() => locale.value);
// JS中响应式切换中英文(写入computed中即可)
const hel = computed(() => t('hello'));
</script>
<style scoped>
table {
  margin-top: 50px;
}

table tr td {
  padding: 2px 5px;
}
</style>

VSCode插件i18n Ally

说明文档:i18n ally

VSCode中安装i18n Ally插件

在这里插入图片描述

启用 i18n Ally

前提是项目中需要安装 vue-i18n 插件!

配置说明

这里有两种方式

  1. 在VSCode设置文件中设置
  2. 在项目文件中设置(推荐)

在项目文件中设置:

项目根目录中找到.vscode文件夹,添加settings.json

或者自动生成:

使用记录中,完成创建实例步骤后,需要重启VSCode,

又下角弹出如下提示:自动检测到翻译文件夹 “src/lang”

会在项目根目录.vscode目录下,自动新建文件settings.json

需手动配置:

文件位置:.vscode/settings.json

基本配置说明:说明文档

{
  "i18n-ally.localesPaths": ["src/lang"], // 翻译文件路径 (自动生成) 相对于项目根目录的语言环境目录路径
  // 如下须要手动配置
  "i18n-ally.keystyle": "nested", // 翻译路径格式 (翻译后变量格式 nested:嵌套式  flat:扁平式)
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.enabledParsers": ["json"], // 翻译文件可允许的格式,默认json
  "i18n-ally.sourceLanguage": "zh", // 翻译源语言 (源文件) 根据此语言文件翻译其他语言文件的变量和内容
  "i18n-ally.displayLanguage": "zh", // 显示语言 (显示文件/翻译文件)
  "i18n-ally.translate.engines": ["deepl", "google"], // 翻译器
  "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
  "i18n-ally.enabledFrameworks": ["vue"],
}

配置好后,若未生效,可尝试右下角的修改源语言

显示语言(i18n-ally.displayLanguage)不要写死,否则显示语言固定,修改显示语言不生效

在这里插入图片描述


翻译文件可允许的格式(i18n-ally.enabledParsers),填写 JSONYAML 格式,功能全面。前面创建的两个语言配置文件zh.jsonen.json,所以这里填写["json"]

支持的语言环境格式

Format(格式)Read(读)Write(写)Annotations(附注)Note(注意)
JSON
YAML评论将不被保留
JSON5评论将不被保留
INI评论将不被保留
properties评论将不被保留
POT
JavaScript只读
TypeScript只读
PHP只读

插件的翻译器挂VPN才能使用

效果

配置完成之后,展示效果如下:

EN hello 之后的图标,依次为:

  • 打开审阅:对文案进行批注
  • 翻译文案:在配置中设置的翻译源语言"i18n-ally.sourceLanguage": "zh")是中文,所以对其他语种有翻译功能
  • 编辑文案:对该文案进行快捷编辑
  • 转到定义:跳转到原文件

在这里插入图片描述

使用说明

打开一个有文字内容的vue文件

打开 i18n Ally 的控制面板

快捷提取文案(两种操作方式)

提取到的文案会写入到显示语言设置的对应翻译文件中:"i18n-ally.displayLanguage": "zh"

  • 展开Hard-coded strings [beta]这一项,可单个提取文案(可以自定义key值)

在这里插入图片描述

  • 右击Hard-coded strings [beta]这一项,选择提取所有,采用默认key值。

    汉语使用拼音拼接,可在设置中将翻译字段命名样式采用驼峰:i18n-ally.extract.keygenStyle": "camelCase"

    在这里插入图片描述

提取单个文案

无注意点。

提取所有文案

可以看到,template模板中的文案都已被成功替换,但js语法中的替换还是vue2中的语法。

在这里插入图片描述

可以选择单个替换,选择对应的替换代码。也可以提取后更改所有匹配项this.$t

在这里插入图片描述

zh.json中已被成功写入:

{
  "hello": "你好",
  "haHaHa": "哈哈哈",
  "dangQianYuYanLeiXing": "当前语言类型",
  "jsZhongXiangYingShiQieHuanYuYan": "JS中响应式切换语言",
  "moBanZhongShiYong": "模板中使用",
  "jianTiZhongWen": "简体中文",
  "english": "English",
  "changeLanguage": "Change language:"
}

翻译缺失文案

还有一个是翻译缺失文案的功能,翻译之后可直接将文案添加到对应文件,需要挂VPN才能使用,手动编辑也可以。

翻译依据为 "i18n-ally.sourceLanguage": "zh" 设置的翻译源语言

在这里插入图片描述

Magic VPN – 最好的免费代理工具

Edge浏览器下载插件,再下载客户端,即可挂VPN

操作示例

如下,开启VPN后,点击缺失文案,即可依据zh.json文件中的JSON字段,将翻译后的文案,自动写入en.json文件中。

若开启VPN后翻译失败,显示日志打印:

ERROR: Error: connect ECONNREFUSED 127.0.0.1:xxxxx

这是因为使用VSCode打开此项目后才开启VPN的原因,重启VSCode即可。

在这里插入图片描述

翻译结果如下:

{
  "hello": "hello",
  "changeLanguage": "Change language:",
  "dangQianYuYanLeiXing": "current language type",
  "english": "English",
  "haHaHa": "Hahaha",
  "jianTiZhongWen": "Simplified Chinese",
  "jsZhongXiangYingShiQieHuanYuYan": "Responsive switching language in JS",
  "moBanZhongShiYong": "used in the template"
}

如此,这款插件便大大节省了工作量!

本文为原创文章,请注意保留出处!

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1812 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1791 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1530 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,683 作者:Pastore Antonio
1528 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1505 浏览量