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

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

• 創(chuàng)建i18n/index.js

import { createI18n } from 'vue-i18n'

// 國(guó)際化語(yǔ)言資源
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
  }
  // 否則讀取當(dāng)前網(wǎng)頁(yè)語(yǔ)言
  const localName = navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en'
  // 設(shè)置緩存
  localStorage.setItem('my_locale', localName)
  return localName
}

// 創(chuàng)建i18n實(shí)例
export const i18n = createI18n({
  locale: getLocal(),
  messages
})

• main.js

import { i18n } from '@/i18n'

app.use(i18n)

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

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

image.png

image.png

• 動(dòng)態(tài)變更語(yǔ)言: i18n.global.locale = lang

      <el-button type="success" @click="changeLanguage">變更語(yǔ)言</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
}

• 源碼：https://gitee.com/FutaoSmile/bilibili-vue3.2
• 官方文檔似乎比較老，不一定適用于vue3

• 把國(guó)際化資源文件單獨(dú)拎出來
• 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'

// 國(guó)際化語(yǔ)言資源
const messages = {
  // 英文
  en: {
    ...en
  },
  // 中文
  zh: {
    ...zh
  }
}