vue插件 vueI18n国际化

前端小萌新y
193 阅读2分钟

背景

最近在做的一个项目中有中英文切换的需求，结合使用的技术栈是vue，所以使用vue-i18n插件配合进行国际化的处理。

用法

注意点：在项目开发中，我们需要使用模块化的思想来开发，尽可能地把中英文配置文件和实例创建、挂载分开写在不同的文件中，方便后期维护。

1、配置挂载

image.png

image.png

//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}

const i18n = new VueI18n({
  locale: localStorage.getItem('langSet') || 'zh', // set locale
  messages // set locale messages
})

export default i18n

//然后再把i18n对象导入main.js中进行挂载即可
//main.js
new Vue({
    el: '#app',
    i18n,
    render: h => h(App)
})

这里我把国际化的文件统一放在lang文件夹中en.js为英文配置文件，zh.js为中文配置文件，index.js为创建I18n实例对象对其进行配置的文件。

2、使用

1.普通文字的中英文转换
内部会通过this.$i18n.locale去判断是显示中文还是英文

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <p>{{ $t("btn.text") }}</p>
    </div>
</body>

</html>

这样就能显示我们在上面配置文件中的内容了。

2.请求接口的数据
当我们发送数据请求的时候，我们没法直接确定接口数据的内容，然后去转换成英文。
这时候我们需要让后端给我们返回两个数据，一个是英文数据，一个是中文数据，中文数据的字段名和英文数据的字段名可以和后端先约定好。
在我们项目中，英文数据字段名+En=中文字段名，比如title的英文字段为titleEn
封装一个全局方法

//第三个参数为现在是什么语言状态的标识
//我们可以直接使用this.$i18n.locale来获取当前语言状态
function zh_en(item, value, i18n) {
  if (i18n == 'zh') {
    return item[value]
  }else {
    return item[value + 'En']
  }
}

3、封装中英文切换组件

<template>
  <div class="set_language" @click="handleSetLanguage">
    {{langMsg[lang]}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      lang: 'zh',
      langMsg: {
        'zh': 'E N',
        'en': 'Z H'
      }
    }
  },
  created() {
    this.lang = this.$i18n.locale
  },
  methods: {
    handleSetLanguage() {
      this.lang = this.$i18n.locale == 'zh'? 'en' : 'zh'
      this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'
      //设置langSet为了在下次进入网站的时候，复用上次退出网站时候的语言状态
      localStorage.setItem('langSet',this.$i18n.locale)
    }
  }
}
</script>

最后贴下vueI18n的官方文档地址，有其他需求的同学可以去阅读官方文档，本文只介绍了其基本用法。 [ kazupon.github.io/vue-i18n/zh…kazupon.github.io/vue-i18n/zh…)

avatar
文章
阅读
粉丝