vue3.2使用i18n实现国际化

什么是 i18n ？

i18n(internationalization)是“国际化”的简称。由于其首尾分别为 i 和 n ，中间有18 个字符。故简写为 i18n。在vue.js中，有vue i18n国际化插件，可以轻松实现项目国际化的操作。

如何使用 i18n ？

• 安装i18n插件

npm install vue-i18n

• 创建所需语言文件(这里仅以中英文为例)

中文语言文件：zh_CN
英文语言文件：en.ts

1.文件en.ts

// src/i18n/language/en.ts
export default {
    system: {
        title: 'test i18n'
    }
}

2.文件zh_CN.ts

// src/i18n/language/zh_CN.ts
export default {
    system: {
        title: '测试 i18n'
    }
}

• 配置 i18n index.ts

// src/i18n/index.ts
import {createI18n} from 'vue-i18n'
import zh_CN from './language/zh_CN'
import en from './language/en'

const messages = {
    zh_CN: {...zh_CN},
    en: {...en}
}

// 获取浏览器当前语言
const getCurrentLanguage = () => {
    const language = navigator.language
    const currentLanguage = language.indexOf('zh') !== -1 ? 'zh_CN' : 'en'
    localStorage.setItem('language', currentLanguage)
    return currentLanguage
}

// 创建i18n实例
const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: localStorage.getItem('language') || getCurrentLanguage() || 'zh_CN',
    messages: messages
})

export default i18n

• 全局注册

import {createApp} from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)

app.use(i18n)
    .mount('#app')

• 使用案例

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

// 创建i18n对象
const i18n = useI18n()

// 获取当前语言
const currentLanguage = computed(() => i18n.locale.value)

// 切换语言
const changeLanguage = (language: string) => {
  localStorage.setItem('language', language)
  i18n.locale.value = language
}
</script>

<template>
  <el-dropdown @command="changeLanguage">
    <span class="el-dropdown-link">切换语言</span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh_CN" :disabled="currentLanguage==='zh_CN'">中  文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLanguage==='en'">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <hr/>
<p>{{ $t(`system.title`) }}</p>
</template>

<style scoped lang="scss">
    
</style>