国际化I18n的使用

下载

npm i vue-i18n

创建语言包对象

英文语言包

// src/languege/en.ts
export default{
  navigateBar:{
    hotspot: 'hotSpot',
    focus: 'Focus'
  }，
  tabs:{
    work: 'Work',
    collect: 'Collect'
  }
}

中文语言包

// src/languege/zh.ts
export default{
  navigateBar:{
    hotspot: '热点',
    focus: '焦点'
  }，
  tabs:{
    work: '作品',
    collect: '收藏'
  }
}

组合语言包

// src/main.ts
import en from './languege/en'
import zh from './languege/zh'
const languageMessage = {
  en,
  zh
}

创建i18n实例并注册

// src/main.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
  legacy: false, // 打开Composition API
  message: languageMessage,
  locale: 'en' // 设置默认语言
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

使用i18n

// src/App.vue
<template>
  <ul>
    <li>{{ $t('navigatorBar.hotspot') }}</li>
    <li>{{ $t('navigatorBar.focus') }}</li>
  </ul>
  <ul>
    <li>{{ $t('tabs.work') }}</li>
    <li>{{ $t('tabs.collect') }}</li>
  </ul>
</template>

根据按钮动态修改语言

// src/App.vue
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
function changeLang(lang: string){
  locale.value = lang
}

<template>
  <button @click="changeLang('en')">英文</button>
  <button @click="changeLang('zh')">中文</button>
  <ul>
    <li>{{ $t('navigatorBar.hotspot') }}</li>
    <li>{{ $t('navigatorBar.focus') }}</li>
  </ul>
  <ul>
    <li>{{ $t('tabs.work') }}</li>
    <li>{{ $t('tabs.collect') }}</li>
  </ul>
</template>