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')

• 使用案例