vue-i18n多语言使用

1.安装

npm install vue-i18n --save

2.引入,挂在到vue实例

全局main.js

import en from '@/views/language/en.json'
import zhHans from '@/views/language/zh.json'
import zhHant from '@/views/language/zhHant.json'
import VueI18n from 'vue-i18n'

const messages = { // 语言枚举
  en,
  zhHans,
  zhHant,
}

Vue.use(VueI18n)

// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'en', // 设置地区
  messages // 设置地区信息
})

new Vue({
  i18n, // 挂在vue上
  router,
  render: h => h(App)
}).$mount('#app')

语言的配置,中文为例子

{
  "drawGuess" : {
    "title": ["游戏玩法","天梯分规则"],
    "list": [1, 2, 3]
  },
}

3.使用

渲染:

标签中

<div>{{ $t("drawGuess.title[0]") }}</div>

v-for使用

<div v-for="(item, index) in $t('drawGuess.list')">{{item}}</div>

toast弹出

this.$toast(this.$t('drawGuess.title[1]'))

4.参考

vue-i18n 文档