vue前端国际化Vue I18n使用入门

1.安装yarn add vue-i18n

2.配置main.js文件

import VueI18n from 'vue-i18n'    // 引入VueI18n 

import { cn } from './static/lang/cn'    // 引入lang文件
import { en } from './static/lang/en'

const i18n = new VueI18n({
  locale: 'en',   // 设置语言
  messages: {
    cn: { ...cn },
    en: { ...en }
  }
})

Vue.use(VueI18n)     // 使用VueI18n

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

3.增加lang文件，比如cn.js

export const cn = {
  otc_failure_0047: '买家必须成交过',
  otc_complaint_appeal_reason: '申诉原因'
}

4.使用，任何一个组件里，直接格式化数据

<div>{{$t('otc_failure_0047')}}</div>

5.后面即可更改main里面的locale，实现国际化语言变更

每个组件都包含一个引用为 $i18n 属性的 VueI18n 实例，该实例也可用于更改语言环境
如中英切换的方法，方法执行，页面会跟着变更

changeLang () {
      const temp = this.$i18n.locale
      if (temp === 'cn') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'cn'
      }
    }