在vue2中使用vue-i18n

2,368 阅读1分钟

u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG.webp

vue-i18n与vue存在版本兼容性问题,vue2.x需要使用 8.9.0以下版本的vue-i18n,我们这里用的vue 2.6.10,配合vue-i18n 8.2.1版本使用

打开项目根目录在终端运行

  • npm install vue-i18n@8.2.1 --save
  • yarn add vue-i18n@8.2.1 --save

下完包以后在项目的src文件夹里面创建lang文件夹并配置

image.png

在index.js里面配置

image.png

在modules里面配置中文和英文

  • 中文 image.png

  • 英文 image.png

配置好以后在main.js里面使用

image.png

在DOM中使用 $t('此处是语言包定义的变量')

      <div class="submit">
        <button @click="onSubmit">{{ $t("login") }}</button>
      </div>

在js中使用this.$t('xxxxxx')

this.$t("login")

需要切换语言的时候使用

this.$i18n.locale = "en"

和后端商量好要什么字段切换语言(大小写),并在request.js里面的请求头加上切换语言的字段。

  const i18n = Geti18n() //此处的Geti8n 是本地存储
    if (i18n) {
      if (i18n === 'en') {
        config.headers['Accept-Language'] = 'en_US'
      } else {
        config.headers['Accept-Language'] = 'zh_CN'
      }
    } else {
      config.headers['Accept-Language'] = 'en_US'
    }