vue3中全局使用vue-I18n多语言

1.下载包

npm install vue-i18n --save (我目前采用"vue-i18n": "^9.2.2")

2.创建多语言文件

英文en.json/中文cn.json/引入语言模块index.js

en.json

{
  "name": "laugh"
}

cn.json

{
  "name": "哈哈哈哈"
}

index.json

import cn from './cn.json'
import en from './en.json'

export default {
  cn,
  en,
}

3.全局处理

main.js

import { createApp } from 'vue'
import App from './App.vue'
import messages from './i18n/index'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false, // 默认是true的
   // 全局注入 $t 函数
  globalInjection: true, // 默认 9.1版本后是true
  locale: 'en',
  messages,
  fallbackLocale: 'en',// 没有英文的时候默认中文语言
})

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

这里要注意的是:

fallbackLocale表示是没有某种语言(locale的设置)，显示什么，而locale表示当前设置什么，例如当前的语言环境是ms(马来西亚），那么local就是ms,但是当前的语言没有匹配到ms的，只能显示fallbackLocale所设置的语言，这种情况很常见的,假设有些地方，比如香港用户不多，但是能够读到当前的环境是应该设置繁体，但是没有必要为了几个用户翻译一种语言，那就显示中文吧

globalInjection: true默认情况下是true，其实可以不设置

local的设置，如果从客户端异步返回，一定要在main.js在渲染之前获取最新的语言，可以写一个自调用函数 mian.js

/**
 * 先获取语言环境，再渲染
 */
const i18n = createI18n({
  // 使用 Composition API 模式，则需要将其设置为false
  legacy: false, // 默认是true的
   // 全局注入 $t 函数
  globalInjection: true, // 默认 9.1版本后是true
  locale: 'en',
  messages,
  fallbackLocale: 'cn',// 没有英文的时候默认中文语言
});

(
  async() => {
    await setTimeout(() => { // 请求数据，获取异步的值
      console.log('获取结果')
    }, 500)
    console.log(i18n)
    i18n.global.locale.value = 'cn' // 拿到客户端的结果后赋值
    createApp(App).use(i18n).mount('#app');
  }
)()

4.参考

Vue-i18n 文档