给iview项目加一个i18n国际化翻译

看了上一篇博客吗？我们就根据那一篇博客来，用里面的项目，进行我们接下来国际化翻译项目。

我们安装vue-i18n和js-cookie

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

第一步在main.js的js引入i18n



第二步建立src/locale文件夹，

//en-US.js
export default {
    "components": {
    // "langChange": 'Language switching'
        "langChange": 'Lang'
    }
}

//zh-CN
export default {
    "components": {
        "langChange": '语言'
	}
}

//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import zhCNLocale from 'iview/src/locale/lang/zh-CN'
import enUSLocale from 'iview/src/locale/lang/en-US'
import zhCN from './lang/zh-CN'
import enUS from './lang/en-US'

Vue.use(VueI18n)

const messages = {
    'zh-CN':{
        ...zhCN,
        ...zhCNLocale
    },
    'en-US':{
        ...enUS,
        ...enUSLocale
    }
}
const getLanguage = function () {
    let lang = navigator.browerLanguage?navigator.browerLanguage:navigator.language||navigator.userLanguage
    lang = lang?lang:'zh-CN'
    if(Cookies.get('language')){
        lang = Cookies.get('language')
    }
    return lang
}
const i18n = new VueI18n({
    locale:getLanguage(),
    messages
})
export default i18n

创建LangSelect.vue组件

<template>
  <div>
    <Dropdown>
      <a href="javascript:void(0)">
        {{$t('components.langChange')}}
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <Dropdown-menu slot="list">
        <!--
          DropdownItem 这里必须用 @click.native 绑定点击事件
         -->
        <Dropdown-item v-for="(item,key) in languages" :key="item.id" @click.native="changeLanguage(key)">
          {{ item }}
        </Dropdown-item>
      </Dropdown-menu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  computed: {
    locale() {
      return this.$store.getters.language
    }
  },
  mounted() {
    // this.currentLanguage = this.languages[this.locale];
  },
  data() {
    return {
      // currentLanguage: "",
      languages: {
        "zh-CN": "简体中文",
        "en-US": "English"
      }
    };
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('setLanguage', lang)
      this.currentLanguage = this.languages[this.locale];
    }
  }
};
</script>

<style scoped>
</style>

在store中添加状态

//action/index.js
import setLanguage from './setLanguage.js'
export default {
    setLanguage
}

//setLanguage.js
import Cookies from 'js-cookie'

export default ({ commit, getters }, language) => {
  commit('updateLanguage', language)
}

//getters/index.js
import language from './language'
export default {
    language
}

//getters/language.js
export default (state) => {
    return state.language
}

//mutations/index.js
import updateLanguage from './updateLanguage'
export default {
    updateLanguage
}

//mutations/updateLanguage.js
import Cookies from 'js-cookie'
export default (state,language) => {
    console.log('updateLang:'+language)
    state.language = language
    Cookies.set('language',language)
}

//state/index.js
import language from './language'
export default {
    language
}

//state/language
import Cookies from 'js-cookie'
export default Cookies.get('language') || 'zh-CN'

//store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

在HelloWorld中引入LangSelect组件

<template>
  <div class="language-all">
    <div class="langguage">
      <lang-select class="right-menu-item"></lang-select>
    </div>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import LangSelect from './LangSelect'
export default {
  name: 'HelloWorld',
  components:{
    'lang-select':LangSelect
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 30px auto 20px 30px;
  }

  .device-list-con {
    padding: 10px;
  }

  .table-bar {
    margin: 30px 20px 10px 20px
  }

  .table-bar .search-input {
    width: 300px;
  }

  .table {
    margin: 0 20px 0 20px
  }
</style>

我们看一下页面运行的效果

大家可以按照上面我的方法做，实现不了效果留言，我解答

里面还存在一个很重要的东西没有引用，看你们发现没有。