vue使用i18n组件，实现页面国际化

基本思路

① 定义语言包：需要几种语言展示，就定义几个语言包

② 创建对象，对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象

③ 创建 vue-i18n 类的对象，同时为其 messages 属性为第②步创建的对象，为其 locale 属性赋值为第②步中语言对象对应的 key

④ 在创建 Vue 实例对象时，挂载 vue-i18n 类的对象

使用

1、安装插件 vue-i18n

i18n是internationalization这个单词的缩写，取了首字母i和结尾字母n，中间一用有18个字母，所以组合起来就所写成i18n

npm install vue-i18n -S

2. 创建国际化文件

• 在 lang 目录下创建不同语言的映射文件，如中文对应 zh.js、英文对应 en.js 等

• 在 lang 目录下创建 index.js 作为默认导出，并在其中创建 i18n 对象

zh.js

export default {
    login: {
        title: '人力资源管理系统',
        login: '登录',
        username: '账号',
        password: '密码',
        any: '随便填',
        thirdparty: '第三方登录',
        thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
    },
    tagsView: {
        close: '关闭',
        closeOthers: '关闭其它',
        closeAll: '关闭所有',
        refresh: '刷新'
    }
}

en.js

export default {
    login: {
    title: 'itheima login',
    login: 'Log in',
    name: 'name',
    entryTime: 'entry time',
    hireForm: 'hire form',
    jobNumber: 'job number',
    department: 'department',
    managementForm: 'management form',
    city: 'city',
    turnPositiveTime: 'turn positive time',

    password: 'Password',
    any: 'any',
    thirdparty: 'Third',
    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
      },
      tagsView: {
        close: 'Close',
        closeOthers: 'Close Others',
        closeAll: 'Close All',
        refresh: 'refresh'
      }
}

lang 目录中 index.js

切换语言，就是切换locale的数据，依据是messages

// 存储当前的语言类型
import Cookies from 'js-cookie'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
// 从语言包文件中导入语言包对象
import zh from './zh'
import en from './en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: Cookies.get('lang') || 'zh',
  messages: {
    en: {
      title: 'this is a title',
      ...enLocale,
      ...en
    },
    zh: {
      title: '这是一个标题',
      ...zhLocale,
      ...zh
    }
  }
})

3.main.js 中引入

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false

import i18n from '@/lang/index.js'
// import request from './utils/request'

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

4.切换语言

方法一、

将当前语言保存在Cookies里面,进行切换，就像上面写的一样

methods: {
    // 只需要做国际化的地方，调用此方法
    setlang() {
      this.$i18n.locale = this.$i18n.locale === 'zh' ? 'en' : 'zh'
      Cookies.set('lang', this.$i18n.locale)
    }
  }

方法二、

navigator.language 方法可以获取浏览器当前使用的语言，基本就代表了用户所使用的语言

在lang文件index中

//在lang文件index中
export default new VueI18n({
  locale: navigator.language,
  messages: {
    en: {
      title: 'this is a title',
      ...enLocale,
      ...en
    },
    zh: {
      title: '这是一个标题',
      ...zhLocale,
      ...zh
    }
  }
})

在使用组件中

<button @click="setlang('zh')">切换为中文</button>
<button @click="setlang('en')">切换为英文</button>
methods: {
    // 只需要做国际化的地方，调用此方法
    setlang(lang) {
      this.$i18n.locale = lang
    }
  }