Vue.js国际化——i18n的使用

为什么需要i18n？

在不同环境针对不同的用户可能需要不同的语言环境包，常规需要接口调用的数据，可以通过请求中的language属性向后端发送请求获取对应语言的信息。而对于前端页面上的静态内容，就可以通过i18n去配置不同环境的语言包。

引入i18

1.安装依赖

npm install vue-i18n --save

2.配置方法

在项目中添加语言包文件夹，分别创建中英文语言包

在文件夹中创建main.js文件，把语言包和Vue对象引入调用

在main.js中将i18n的配置挂载到Vue对象上。

使用方法

经过配置已经可以在页面中用$t去获取语言包中配置的信息，在不同语言环境下去拿不同的语言包

 

拓展——i18n语言切换

常在一些cms的网站中出现，比如一位外国友人在中文站点需要访问外文语言包

下面是封装的一个语言切换的组件仅作参考。只针对前端语言包的切换，对于请求数据的语言切换将记录在axios的封装中。

<template>
  <div class="i18n-swith">
    <nuxt-link v-for="locale in availableLocales"
               class="switching"
               :class="$device.isMobile ? 'font-small': 'font-normal'"
               :key="locale.code"
               :to="switchLang(locale.code)"
    >
      {{ $t(`lang.${locale.code}`) }}
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'LangSwitch',
  data() {
    return {

    };
  },
  computed: {
    localeCode() {
      return this.$i18n.locale;
    },
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }
  },
  methods: {
    switchLang(locale) {
      if (process.client) {
        this.$store.dispatch('getMenuList', { i18n: this.$i18n, route: this.$route });
        this.$store.dispatch('getFooterPages');
      }
      return this.switchLocalePath(locale);
    },
  },
};
</script>

<style lang="scss" scoped>
.i18n-swith {
  padding: 0;
  cursor: pointer;
  text-align: right;
  height: 22px;
  .switching {
    color: $base-blue;
    line-height: 22px;
    display: inline-block;
  }
}
</style>