Vue项目i18n国际化

什么是国际化

国际化指的是一个网站支持不同的语言，以满足不同国家、不同语种的用户访问。

国际化解决方案

1. 针对不同国家做不一样的页面。
2. 不同的国家和地区，页面布局一样，语言不同。

什么是i18n国际化

国际化的英文internationalization 由于拼写太长，一般习惯称为i18n。 i18n国际化就是上面的第二方案。

i18n基本使用

1. 安装vue-i18n

npm i vue-i18n
// vue2.x安装下面这个
npm i vue-i18n@8

2. 在main.js中引入vue-i18n

// 引入i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 创建一个VueI18n对象
const i18n = new VueI18n({
  // 指定语言对象为zh
  locale: 'zh',
  messages: {
    // 英文语言对象
    en: {
      nameTxt: 'name',
      ageTxt: 'age',
      sexTxt: 'sex',
    },
    // 中文语言对象
    zh: {
      nameTxt: '姓名',
      ageTxt: '年龄',
      sexTxt: '性别',
    }
  }
})

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

3. 使用

// 在模板中通过 $t('属性') 获取到语言对象中的值
<span>{{$t('nameTxt')}}</span>
<span>{{$t('ageTxt')}}</span>
<span>{{$t('sexTxt')}}</span>

// 通过this.$i18n.locale = 'xx' 设置语言对象
this.$i18n.locale = 'zh'
this.$i18n.locale = 'en'