vue-i18n front-end internationalization --- vue3

Introducing vue-i18n

The installation of vuei18n is described in detail in the above official documents

Steps to use vue-i18n

1. First create a folder called languages ​​in the project, and then create a langs folder and i18n.ts in it, as shown below
   

Like cn.ts/enUs.ts are the languages ​​to be translated

The code content of index.ts:

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

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

The code content of 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. Globally introduce vue-i18n (in main.ts)

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

3. Create a control on the page that can control language conversion, here is

<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. Operate on values ​​that need to be internationalized in the page

用到$的就是全局不需要引入
 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?")