Vue I18n 实现多语种

公司疫情监测终端管理平台需要国际化，于是我找到了vue-i18n。

安装

代码语言：javascript复制

yarn add vue-i18n

引入

代码语言：javascript复制

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

main.ts 中配置词库

代码语言：javascript复制

const i18n = new VueI18n({
  locale: 'zh',   // 通过 this.$i18n.locale 修改语种
  messages: {
    'zh': require('@/utils/lang/zh'),
    'en': require('@/utils/lang/en')
  }
})

zh.ts

代码语言：javascript复制

export const lang = {
  header: {
    title: '标题'
  }
}

en.ts

代码语言：javascript复制

export const lang = {
  header: {
    title: 'title'
  }
}

引用翻译

代码语言：javascript复制

// html 中
<span> {{ $t('lang.header.title') }} </span>

// js 中
this.$i18n.t('lang.header.title')

修改语种

代码语言：javascript复制

<v-btn text @click="handlerChangeLang"> {{ this.$i18n.locale }} </v-btn>

// 简单中英切换
handlerChangeLang() {
  if (this.$i18n.locale === "zh") {
    this.$i18n.locale = "en";
  } else {
    this.$i18n.locale = "zh";
  }
}

typescript

0 人点赞