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是变量名

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

this.$vuei18n.locale = 'en'

猜你喜欢

转载自www.cnblogs.com/yummylucky/p/11323971.html