vue-i18n前端国际化---vue3

介绍vue-i18n

vuei18n的安装在上面的官方文档里都有详细介绍

vue-i18n的使用步骤

1. 首先在项目里创建一个文件夹为languages，里面再创建一个langs文件夹和i18n.ts，如下图
   

像cn.ts/enUs.ts都是要翻译的语言

index.ts的代码内容：

import en from './enUs';
import cn from './cn';

export default {
    
    
  'zh-cn': cn,
  English: en,
};

i18n.ts的代码内容：

import {
    
     createI18n } from 'vue-i18n';
import messages from './langs/index';

const i18n = createI18n({
    
    
  legacy: false,
  globalInjection: true,
  locale: 'English',//这个就代表了你当前的国际化语言
  messages: messages,
});

export default i18n;

2. 全局引入vue-i18n(在main.ts中进行)

import i18n from '../languages/i18n';//后面的地址就是i18n.ts也就是createI18n文件的地址
app.use(i18n);

3. 在页面上创造一个可以控制语言转换的控件，我这边是

<a-select v-model:value="$i18n.locale" :bordered="false">
  <a-select-option key="en-Us" value="English">English</a-select-option>
  <a-select-option key="zh-cn" value="zh-cn">中文</a-select-option>
</a-select>

//上面代码中v-model:value="$i18n.locale"中的i18n就是上面在main.ts引用的app.use(i18n)，而$就是全局的意思，这个locale也是上文所提到的，用于决定你当前的国际
//化语言，由于vue中双向数据绑定的原理，v-model里面的值会随着我所选择出的下拉列表的value值的变化而变化，从而达到国际化语言的转换，而下拉列表中的value值跟上面
//index.ts导出来的键值保持一致即可

4. 对页面中需要进行国际化的值进行操作

用到$的就是全局不需要引入
 1.普通文本的使用：{
    
    {
    
     $t("withdraw") }}
 2.标签内的使用：:title="$t('Are you sure withdraw this task?')" //一定不能丢失:，它的作用就是让引号里面的内容可变，如果不加上:，那它就是个单纯的字符串而已
 3.js/ts/script的使用：
 <1>.import {
    
     useI18n } from "vue-i18n";
 <2>.const {
    
     t } = useI18n();
 <3>.t("Are you sure you want to claim it?")