Vue I18n 使用

参考

Vue I18n

初始化

安装依赖：

npm

npm install vue-i18n@11

yarn

yarn add vue-i18n@11

pnpm

pnpm add vue-i18n@11

引入：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

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

i18n 配置

import enMessages from './langs/en.json'
import zhMessages from './langs/zh-CN.json'

/** 获取当前语言 */
function getLanguage() { ... }

const i18nOptions: I18nOptions = {
  legacy: false,  // 是否使用 Vue 2 旧版 API
  locale: getLanguage(),  // 当前语言
  fallbackLocale: 'zh-CN',   // 备用语言，翻译缺失时回退的语言
  messages: {   // 多语言对象
    'en': enMessage
    'zh-CN': zhMessage,
  }
}

const i18n: I18n = createI18n(i18nOptions)

使用

模板中使用：

<p>{{ $t('xxx.xxx') }}</p>

脚本中使用：

import { useI18n } from 'vue-i18n'

const { locale, t } = useI18n()

t('xxx.xxx') // 如果有以上使用，模板中也可以去掉 $