Vue3使用 i18n 实现国际化

1. 通过 npm i vue-i18n@next 安装

2. 在 plugin 文件夹下新建 i18n.ts 文件：

import {createI18n} from 'vue-i18n'

const messages = {
    en: {
        message: {
            hello: 'hello world'
        },
        changeText:'change text'
    },
    ru: {
        message: {
            hello: 'Китай'
        },
        changeText:'переключить текст'
    }
}
const i18n = createI18n({
    legacy: false,
    globalInjection: true,

    locale: 'en',
    messages
})

export default i18n

3. 将 i18n.ts 引入到 main.ts

4. 在 SFC 内部使用：

<script lang="ts" setup>
import {useI18n} from 'vue-i18n'

const { locale } = useI18n()
const changeLanguage = () => {
  locale.value=locale.value=== 'en' ? 'ru' : 'en'
}
</script>

<template>
  {{ $t("message.hello") }}
  <button @click="changeLanguage">{{ $t('changeText') }}</button>
</template>

<style scoped>

</style>