vue3:i18n的使用

i18n 国际化语言

下载i18n

npm i i18n -S

创建i18n文件

main.ts中导入 ，

i18n/index

import {createI18n} from 'vue-i18n'
import messages from './message'
const i18n = createI18n({
  legacy:false , 
  locale:localStorage.getItem('lang') ||'en' , 
  messages
})
export default i18n

 i18n/messages

import zh from './lang/zh'
import en from './lang/en'
import tc from './lang/tc'
export default {
  en , zh , tc
}

zh.ts

export default {
  messages: {
    login:'登录',
    username:'用户名' , 
    switchLanguage:'选择语言' , 
    langZh:'中文' , 
    langEn:'English',
    langTc :'繁体',
    bookstore:'书城' , 
    community:'社区' , 
    welfare:'福利' , 
    my:'我的'
  }
}

en.ts

export default {
  messages: {
    login:'Login',
    username:'username',
    switchLanguage:'choose Language' , 
    langZh:'Chinese' , 
    langEn:'English',
    langTc :'繁体',
    bookstore:'bookstore' , 
    community:'community' , 
    welfare:'welfare' , 
    my:'my'

  }
}

index.vue页面中的使用

<template>
<div>
首页 --- {{ $t('messages.login') }}---{{ $t('messages.username') }}
<!-- <div v-t="'messages.username'"></div> -->
<el-dropdown placement="top-start">
      <el-button> {{ $t('messages.switchLanguage') }} </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="changelang('zh')">{{ $t('messages.langZh') }}</el-dropdown-item>
          <el-dropdown-item @click="changelang('en')">{{ $t('messages.langEn') }}</el-dropdown-item>
          <el-dropdown-item @click="changelang('tc')">{{ $t('messages.langTc') }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
</div>

</template>

<script setup lang="ts">
    import {ref} from 'vue'
    import {useI18n} from 'vue-i18n'
    let {locale} = useI18n()
    let changelang = (type) => {
locale.value = type
localStorage.setItem('lang' , type)
    }
</script>

<style lang="scss" scoped>

</style>

模板中用$t

$t('message.name')

vue-i18n官网地址：Getting started | Vue I18n