vue 使用vue-i18n 国际化，语言切换功能

最近项目中要使用到语言切换这一功能，遂百度一番，发现使用vue-i18n即可以实现项目国际化。
1. 首先安装vue-i18n

npm install vue-i18n

2 在main.js里面引用

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

3 创建i18n实例

import zh from './../static/lang/zh' // 简体中文语言包
import en from './../static/lang/en' // 英文语言包
import tw from './../static/lang/zhCHT' // 繁体中文语言包
const i18n = new VueI18n({
  locale: window.localStorage.getItem('language')===null?'zh':window.localStorage.getItem('language'), // 语言标识，设置默认语言
  messages: {
    'zh': zh, // 简体中文
    'en': en, // 英文
    'tw': tw // 繁体中文
  }
})

4 将实例挂载在vue实例里面

new Vue({
  el: '#app',
  router,
  i18n, // 使用国际化
  components: {
    App
  },
  template: '<App/>'
})

5 建立对应的语言包，我是在static文件夹里面建立的，弄好之后需在main.js里面引用语言包，见步骤3。

// 简体中文语言包
module.exports = {
  message: {
    hello: '你好',
    about: '关于',
    welcome: '欢迎'
  },
  nav: {
    content: '内容管理',
    userManage: '用户管理',
    Statist: '统计分析',
    seting: '综合设置',
    new: '新增和启动',
    active: '活跃分析',
    time: '时段分析',
    retention: '用户留存',
    loss: '用户流失',
    use: '使用',
    Retain: '留存'
  }
}

// 英文语言包
module.exports = {
  message: {
    hello: 'hello',
    about: 'about',
    welcome: 'Welcome'
  },
  nav: {
    content: 'Content management',
    userManage: 'User management',
    Statist: 'Statistical analysis',
    seting: 'Comprehensive setting',
    new: 'Add and start',
    active: 'Active analysis',
    time: 'Time interval analysis',
    retention: 'User retention',
    loss: 'Loss of users',
    use: 'use',
    Retain: 'Retain'
  }
}

// 中文繁体
module.exports = {
  message: {
    hello: '妳好',
    about: '關於',
    welcome: '歡迎'
  },
  nav: {
    content: '內容管理',
    userManage: '用戶管理',
    Statist: '統計分析',
    seting: '綜合設置',
    new: '新增和啟動',
    active: '活躍分析',
    time: '時段分析',
    retention: '用戶留存',
    loss: '用戶流失',
    use: '使用',
    Retain: '留存'
  }
}

6 在vue页面使用

<p>{{$t('nav.content')}}</p>
// 注意： 是 $t()，‘t’不能漏掉

7 设置和切换语言，vue-i18n有一个local方法用来设置全局的语言：

 this.$i18n.locale = 'zh'
 // 为了防止刷新页面时语言回到默认，需要存储在本地或者cookies里面，

这些都做好之后，就可以愉快的切换语言啦！
附上我写的demo源码：https://github.com/AlwaysLoveme/vue-i18n