vue项目中如何使用多语言

前言

本文以中英文为例，使用了element库，主要包括以下内容：

• 怎样安装多语言插件
• 怎样配置语言包、初始化以及使用
• 怎样自动识别当前浏览器的配置语言
• 怎样切换语言

1、安装vue-i18n包

npm install vue-i18n --save-dev

2、使用

2.1 创建以下文件并添加如下代码

• src/utils/i18n/index.js
• src/utils/i18n/langs/en.js
• src/utils/i18n/langs/zh.js

en.js

export default {
  message: {
    dateTitle: 'select date',
    changeLangSuccessMsg: 'Switch to English!'
  }
}

zh.js

export default {
  message: {
    dateTitle: '选择日期',
    changeLangSuccessMsg: '切换为中文！'
  }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import zh from '@/utils/i18n/langs/zh.js'
import en from '@/utils/i18n/langs/en.js'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',
  messages: {
    en: Object.assign(en, enLocale),
    zh: Object.assign(zh, zhLocale)
  }
})

locale.i18n((key, value) => i18n.t(key, value)) // 为了实现element插件的多语言切换

export default i18n

2.2 main.js中引入

import i18n from '@/utils/i18n/index'

3、使用

<template>
  <div>
    <div class="lang">
      <el-dropdown>
        <i class="iconfont icon-language4">中文/English</i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toggleLang('zh')" :disabled="$i18n.locale === 'zh'">中文</el-dropdown-item>
          <el-dropdown-item @click.native="toggleLang('en')" :disabled="$i18n.locale === 'en'">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="block">
    <span class="demonstration">{{ $t("message.dateTitle") }}</span>
    <el-date-picker
      v-model="value1"
      type="date"
      :placeholder="$t('message.dateTitle')">
    </el-date-picker>

  </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: ''
    }
  },
  created () {
    this.getCurBrowserLang()
  },
  methods: {
    // 获取当前浏览器的配置语言
    getCurBrowserLang () {
      const type = navigator.appName
      let lang = type === 'Netscape' ? navigator.language : navigator.userLanguge
      lang = lang.substr(0, 2)
      localStorage.setItem('locale', lang)
    },
    // 切换当前语言
    toggleLang (lang) {
      localStorage.setItem('locale', lang)
      this.$i18n.locale = localStorage.getItem('locale')
      this.$message({
        message: this.$t('message.changeLangSuccessMsg'),
        type: 'success'
      })
    }
  }
}
</script>