vue使用vue-i18n实现多国语言切换

在vue的项目实现多国语言的切换的一个功能，用到vue-i18nvue插件，主要实现的一个功能就是通过select组件进行语言的一个切换。
demo地址(https://github.com/xukeler/i18n)：

中文状态

image.png

英文状态

image.png

日文状态

image.png

• 使用前首先要搭建好开发环境，这里使用的是vue-cli3搭建的开发环境，用到iview的select组件。环境搭建好之后就可以下载vue-i18n，引入使用。

cnpm install vue vue-i18n --save//下载

然后在main.js里面引入。创建带有选项的 VueI18n 实例，挂载到vue上，引入根目录创建的语言包。

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {//引入语言包
    'zh': require('./lang/zh'),   // 中文语言包
    'en': require('./lang/en'),    // 英文语言包
    'ja': require('./lang/ja'),    // 日文语言包
  }
})
new Vue({
  router,
  store,
  i18n,//挂载vue上
  render: h => h(App)
}).$mount('#app')

语言包其实就是提前翻译好的文件，键名一样，键值就是各个语言的翻译。

export const m = { 
    welcome: 'Welcome to Beijing.',
    languageCheck:"languange check",
    today: 'Today is ',
    menu:"menu"
  }
export const m = {
    welcome: '欢迎来到北京',
    languageCheck:"语言切换",
    menu:'菜单'
}
export const m = {
    welcome: 'ようこそ',
    languageCheck:"言語選択",
    today: '今天是',
    menu:'メニュー'
}

• 在组件中使用，使用语言包，必须通过$t("对象键名")的方式使用,只是将原来直接写data名加个$t()。

  <h4>{{$t("m.languageCheck")}}</h4>

• 语言的切换，通过选中的select的值进行判断，再通过this.$i18n.locale修改当前语言。将当前选择的语言存到localstorage中，每次需要切换的时候，就先判断本地存储有没有，如果没有就默认是中文。

组件
 <i-select :model.sync="model1" style="width:200px" @on-change="change">
        <i-option v-for="item in lan" :key="item.key" :value="item.key">{{ item.lang }}</i-option>
    </i-select>

data
 data(){
    return {
      lan:[
        {lang:"中文",key:1},
        {lang:"English",key:0},
        {lang:"Japanse",key:2}
      ],
      model1:"1",
      lang:null
    }
  }
方法
 change(val){
      console.log(val)
      if(val==0){
        this.lang='en';
        localStorage.setItem("locale",this.lang)
        this.$i18n.locale = this.lang;
      }else if(val==1){
        this.lang="zh";
        localStorage.setItem("locale",this.lang)
        this.$i18n.locale = this.lang;
      }else{
          this.lang="ja";
        localStorage.setItem("locale",this.lang)
        this.$i18n.locale = this.lang;
      }
    },

• 如果要添加更多国家的语言，只需要在新建语言包，引入，将翻译的内容放进去即可。