Vue 搭配vue-i18n 实现国际化，使用$t

vue中使用 vue-i18n 实现国际化 $t

1、安装

npm install vue-i18n

2、import

import VueI18n from ‘vue-i18n’

3、挂载

Vue.use(VueI18n)

4、创建实例

复制代码

const vuei18n = new VueI18n({
    locale: 'zh', 
    messages: {
      'zh': require('./static/lang/zh'),
      'en': require('./static/lang/en')
    }
})

5、对应语言包示例

export const zh = {
  name: '小明'，
  type: '美丽的女孩'
}
export const en = {
  name: 'Bob',
  type: 'Pretty girl'
}

6、绑定到模板

<span>{{$t('someThing')}}</span> //此处的someThing是变量名

<van-field
      required
      :label="$t('labelName')"
      :placeholder="$t('placeholderName')"
/>//此处的labelName，placeholderName是变量名

7、在vue方法中切换中英文

this.$vuei18n.locale = ‘en’