vue3 中如何使用 vue-i18n

下载vue3版本的vue-i18n

npm install vue-i18n -S

//or

cnpm i vue-i18n -S

//or

yarn add vue-i18n

当前使用的版本 "vue-i18n": "^9.1.6"

i18n 文件下的 index.js

zh , en , 分别为两种语言文件 格式为（json） 中文 和 英文

en:
{
    "header": {
        "chat": "chat"
    }
}

zh:
{
    "header": {
        "chat": "聊天"
    }
}



import { createI18n } from 'vue-i18n';

const i18n = createI18n({

    // 默认语言
    locale: 'zh',

    // 关闭控制台警告
    silentFallbackWarn: true,

    // 设置语言环境
    messages: {
        'en': require('./en.json'),
        'zh': require('./zh.json')
    }

});

export default i18n;

在入口（main）文件引入 i18n

import i18n from './i18n/config';

App.use(i18n);

切换语言以及使用

import { useI18n } from "vue-i18n";

const { locale } = useI18n();

<p>{{ $t('header.chat') }}</p>

<p>{{ t('header.chat') }}</p>

<button @click="handleZh ('zh')">中文</button>

<button @click="handleEn ('en')">英文</button>

setup() {

        // 中文
           const handleZh = (val) => {
           locale.value = val;
      };
        // 英文
            const handleEn = (val) => {
            locale.value = val;
      };

        return {
            handleZh，
            handleEn 
       }；
    
}