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

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

import { i18n } from '@/i18n'
app.use(i18n)

<el-button type="primary" @click="handleLogin">{{$t('login.loginBtn')}}</el-button>
      <el-button type="info" @click="changeType">{{ tips }}{{$t('login.pwdBtn')}}</el-button>

<el-button type="success" @click="changeLanguage">变更语言</el-button>
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
}

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

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

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