vue+iview+i18n国际化

首先安装i18n 和 js-cookie

npm install vue-i18n
npm install js-cookie --save

第一步：

新建src/language文件夹 和src/language/config，在language下新建文件index.js，在language/config下新建zh.js(中文) en.js(英文) 文件。

image.png

第二步：

index.js文件

import Vue from 'vue/dist/vue.min.js';
import VueI18n from 'vue-i18n/dist/vue-i18n';
import Cookies from 'js-cookie';
import iviewEN from 'iview/dist/locale/en-US';
import iviewZH from 'iview/dist/locale/zh-CN';

// 存储在本地,刷新后不会丢失
const language = Cookies.get('language') || 'zh';
Cookies.set( 'language' , language )

Vue.use(VueI18n)
const messages = {
    'zh':{
        ...require('./config/zh.js'),
        ...iviewZH
    },
    'en':{
        ...require('./config/en.js'),
        ...iviewEN
    }
}
const getLanguage = function () {
    let lang = navigator.browerLanguage?navigator.browerLanguage:navigator.language||navigator.userLanguage
    lang = lang?lang:'zh'
    if(Cookies.get('language')){
        lang = Cookies.get('language')
    }
    return lang
}
const i18n = new VueI18n({
    locale:getLanguage(),
    messages
})
export default i18n;

en.js 英文翻译文件

module.exports = {
    navbar: {
        English: 'English',
        Chinese: 'chinese',
        Tc: 'traditional Chinese',
        homepage: 'home page',
        personal: 'personal',
        logout: 'logout',
        language: 'language'
    }
}

zh.js 英文翻译文件

module.exports = {
  //头部
  navbar:{
    English:'英文',
    Chinese:'中文',
    Tc:'繁体',
    homepage:'首页',
    personal:'个人中心',
    logout:'退出登录',
    language:'语言'   
  } 
}

第三步

在main.js引入，挂载

import VueI18n from "vue-i18n"
import i18n from "./language"
Vue.use(VueI18n)//注入到所有的子组件
const app = new Vue({
  el: '#app',
  router,
  store,
  i18n,//挂载
  components: { App },
  template: '<App/>'
})

第四步 使用

<Dropdown trigger="click" @on-click="handleClickDropdown2">
              <a href="javascript:void(0)" style="color:#ffffff">
                <div class="demo-avatar">
                  {{lang}}
                </div>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem name="ch">{{$t('navbar.Chinese')}}</DropdownItem>
                <DropdownItem name="en">{{$t('navbar.English')}}</DropdownItem>
                <DropdownItem name="tw">{{$t('navbar.Tc')}}</DropdownItem>
              </DropdownMenu>
 </Dropdown>

export default{
    data(){
        return{
            lang:''
        }
    },
    methods:{
        //语言选择
      handleClickDropdown2(name){
        if(name === 'ch'){
          this.lang="中文"
          this.$i18n.locale = 'zh'//这是在locale里Index.js定义的中文变量
        }else if(name === 'en'){
          this.lang="English"
          this.$i18n.locale = 'en'
        }else if(name === 'tw'){
          this.lang='繁體'
          this.$i18n.locale = 'tw'
        }
      },
    }
}

第五步 在js中使用

在main.js里给vue对象赋值给一个变量

window.vm=new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: '<App/>'
}).$mount('#app')

在js里使用

<div class="demo-avatar">{{lang}}</div>

export default{
    data(){
        return{
            lang:window.vm.$t('navbar.language')//使用国际化
        }
    }
}