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();

{{ $t('header.chat') }}

{{ t('header.chat') }}

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

你可能感兴趣的:(前端,vue3,vue.js,前端)