vue3使用i18n实现国际化与动态切换语言

https://kazupon.github.io/vue-i18n/zh/started.html#javascript

• 安装依赖: npm install vue-i18n@next
"vue-i18n": "^9.2.0-beta.33"

• 创建i18n/index.js

import { createI18n } from 'vue-i18n'

// 国际化语言资源
const messages = {
  // 英文
  en: {
    login: {
      loginBtn: 'login',
      pwdBtn: 'password'
    }
  },
  // 中文
  zh: {
    login: {
      loginBtn: '登录',
      pwdBtn: '密码'
    }
  }
}

/**
 * 获取
 * @returns {string}
 */
function getLocal () {
  // 如果缓存中存在，则直接返回
  const myLocale = localStorage.getItem('my_locale')
  if (myLocale) {
    return myLocale
  }
  // 否则读取当前网页语言
  const localName = navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en'
  // 设置缓存
  localStorage.setItem('my_locale', localName)
  return localName
}

// 创建i18n实例
export const i18n = createI18n({
  locale: getLocal(),
  messages
})

• main.js

import { i18n } from '@/i18n'

app.use(i18n)

• 使用: {{$t('xx.xx')}}

      {{$t('login.loginBtn')}}
      {{ tips }}{{$t('login.pwdBtn')}}

image.png

image.png

• 动态变更语言: i18n.global.locale = lang

      变更语言


import { i18n } from '@/i18n'

const changeLanguage = () => {
  console.log('i18n.global.locale', i18n.global.locale)
  const lang = i18n.global.locale === 'en' ? 'zh' : 'en'
  localStorage.setItem('my_locale', lang)
  i18n.global.locale = lang
}

• 源码：https://gitee.com/FutaoSmile/bilibili-vue3.2
• 官方文档似乎比较老，不一定适用于vue3

---

• 把国际化资源文件单独拎出来
• en.js

export default {
  login: {
    loginBtn: 'login',
    pwdBtn: 'password'
  }
}

• zh.js

export default {
  login: {
    loginBtn: '登录',
    pwdBtn: '密码'
  }
}

• i18n/index.js

import zh from '@/i18n/zh'
import en from '@/i18n/en'

// 国际化语言资源
const messages = {
  // 英文
  en: {
    ...en
  },
  // 中文
  zh: {
    ...zh
  }
}