Vue3的VueI18n多语言环境切换

Vue3 VueI18n 多语言环境切换

需求：项目中需要自定义切换中/英文

// 安装
npm install [email protected]
yarn add [email protected]

// vue3.0使用
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')

APP中挂载

const messages = { // 语言包
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
// 构建实例
const i18n = VueI18n.createI18n({
  locale: 'ja', // 默认当前语言环境
  fallbackLocale: 'en', // 第二默认语言环境
  messages, // 语言包
  // 其他配置项
  // ...
})

// 4. 挂载到app
app.use(i18n)

// 5. Mount
app.mount('#app')

使用语言包

// 通过 this.$t() 来获取对应语言包的值
<div>{{$t('message.hello')}}</div>

修改语言环境

// 通过 this.$i18n.locale 来修改语言环境
<button @click="$i18n.locale = 'en'">英文</button>
<button @click="$i18n.locale = 'ch'">中文</button>