vue-i18n 插件实现国际化，支持切换不同语言

文档https://kazupon.github.io/vue-i18n/zh/started.html 

1、安装依赖包vue-i18n

$ npm install vue-i18n --save

2、国际化相关的代码都放在项目的src/lang目录下

src/lang/en.js

export default {
  login: {
    title: 'Login Form',
    logIn: 'Login',
    username: 'Username',
    password: 'Password',
    startText: 'Drag the slider to the far right',
    successText: 'Validation successful',
    usernameTip: 'Please enter the user name',
    passwordTip: 'Please enter the password',
    statusTip: 'Please drag the slider to complete the verification'
  }
}

src/lang/zh.js

export default {
  login: {
    title: '系统登录',
    logIn: '登录',
    username: '账号',
    password: '密码',
    startText: '拖动滑块到最右侧',
    successText: '验证成功',
    usernameTip: '请输入帐号',
    passwordTip: '请输入密码',
    statusTip: '请拖动滑块完成验证'
  }
}

src/lang/index.js

如果项目使用了element ui，element ui也需要进行国际化，它可以与 vue-i18n 搭配使用实现多语言切换https://element.eleme.cn/#/zh-CN/component/i18n。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  // 默认语言标识 
  locale: 'zh',
  // 存放语言信息的对象
  messages
})

export default i18n

3、在main.js中创建vue实例

import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import store from './store'
import router from './router'

import i18n from './lang' // 国际化

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)  // ElementUI国际化：自定义处理方法
})


Vue.config.productionTip = false

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

4、在组件中的使用

在页面结构中：{{$t('login.title')}}，在js中：this.$t('login.usernameTip')

<template>
  <div class="login-container">
    <!-- 标题 -->
      <div class="title-container">
        <h3 class="title">{{$t('login.title')}}</h3>
      </div>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback)=> {
      if (!value) {
        callback(new Error(this.$t('login.usernameTip')))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: ''
      },
      loginRules: {
        username: [{ validator: validateUsername, trigger: 'blur' }]
      }
    }
  }
}
</script>

5、切换语言方法

<script>
export default {
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

基本使用流程已完成。 

6、优化：本地缓存当前语言标识，new VueI18n()时，从缓存读取。

以下完全照搬了vue-element-admin后台模板代码https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html

src/lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
  const locales = Object.keys(messages)
  for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
      return locale
    }
  }
  return 'zh'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh 
  locale: getLanguage(),
  // set locale messages
  messages
})

export default i18n

在切换语言时，cookie中缓存当前语言标识

<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)
      this.$message({
        message: 'Switch Language Success',
        type: 'success'
      })
    }
  }
}
</script>

src/store/modules/app.js 

import Cookies from 'js-cookie'
import { getLanguage } from '@/lang/index'

const state = {
  language: getLanguage()
}

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

7、