Vue3 i18n 構成の詳細な指導

1.クラスライブラリをインストールする

npm インストールvue-i18n@next

@next は、 i18n の最新の vue3 バージョンをインストールすることを意味します

2. i18n 設定ファイルを設定する

// i18n.ts

import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const i18n = createI18n({
    legacy: false,  // 没有该参数可能会报错
    locale: 'zh',
    messages: {
        zh,
        en
    }
})

export default i18n

// zh.ts
export default {
    message: {
        homeText: '主页',
        mineText: '个人中心'
    }
}

3. インスタンスにマウントする

// main.ts
import i18n from './language/i18n'

const app = createApp(App)
...
app.use(i18n)

 4. 使用する

// 使用的 xxx.vue
<script setup lang="ts">
    import { useI18n } from "vue-i18n";
    const { t } = useI18n()
</script>

<template>
     <p>{
   
   {t('message.homeText') }} </p>
</template>

ボタンをクリックして言語を切り替えます 

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

// 核心思想就是改变 useI18n 解构出来的locale
// 笔者 这里为了和页面中的其他变量 区别  - 取别名 i18nLanguage。  
const { locale: i18nLanguage } = useI18n()

const toggle = (languageKey) => {
  i18nLanguage.value = languageKey  // zh en
}
</script>
<template>
<el-button @click="toggle('zh')">点击切换中文</el-button>
<el-button @click="toggle('en')">点击切换英文</el-button>
</template>