前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化

本项目利用 VueI18n 组件进行国际化，使用之前，需要进行安装

$ npm install vue-i18n

一、框架引入步骤：

1. 先在 main.js 中引入 vue-i18n。

// 国际化插件
import utils from '@/config/cookieUtils'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

let currentLang = utils.get('CurrentLang')
if (currentLang !== 'en-US') {
  currentLang = 'zh-CN'
}
const i18n = new VueI18n({
  locale: currentLang,    // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./lang/zh'),   // 中文语言包
    'en-US': require('./lang/en')    // 英文语言包
  }
})

2. 创建语言包文件

　　　　　　zh.js 代码：

export const m = {
  home_page: '首页',
  app_center: '应用中心',
  document_center: '文档中心',
  document: '文档',
  plat_des: '平台概述',
  API_des: 'API 简介',
  front_comp: '前端组件',
  ability_comp: '能力组件',
  jicheng_center: '集成中心',
  common_problem: '常见问题',
  api_interface: 'API接口',
  manager_controlle: '管理控制台',
  service_controlle: '服务治理平台',
  more: '更多',
  haopingRank: '好评排行',
  visitRank: '访问排行',
  downloadRank: '下载排行'
}

en.js

export const m = {
  home_page: 'Home',
  app_center: 'App Center',
  document_center: 'Document',
  document: 'Document',
  plat_des: 'Introduction',
  API_des: 'API Introduction',
  front_comp: 'Front Component',
  ability_comp: 'Ability Component',
  jicheng_center: 'Integration Center',
  common_problem: 'Normal Problem',
  api_interface: 'API Interface',
  manager_controlle: 'Control',
  service_controlle: 'Service Manage Control',
  more: 'More',
  haopingRank: 'Ping Rank',
  visitRank: 'Visit Rank',
  downloadRank: 'Download Rank'
}

3. 实现语言切换

data () {
      return {
        lang: utils.get('CurrentLang')
      }
    },

<a @click="changeLangEvent()" style="float:right; color:#fff;">切换语言</a>

changeLangEvent: function () {
        this.$confirm('确定切换语言吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 切换语言
          if (this.lang === 'zh-CN') {
            this.lang = 'en-US'
          } else {
            this.lang = 'zh-CN'
          }
          this.$i18n.locale = this.lang // 关键语句
          utils.set('CurrentLang', this.lang)
        }).catch(() => {
          this.$message({
            type: 'info'
          })
        })
      }

4. 接口层面实现多语言，方案为：在HTTP请求头中携带语言信息，接口服务根据语言，返回不同的语言环境响应体。

本项目 vue.js 使用了 axios 组件，实现的话就统一在HTTP请求request拦截器中处理，代码如下：

// http request 拦截器
axios.interceptors.request.use(
  config => {
    // 语言环境设置
    let currentLang = utils.get('CurrentLang')
    if (currentLang === 'en-US') {
      config.headers['X-Client-Language'] = 'en-US'
    } else {
      config.headers['X-Client-Language'] = 'zh-CN'
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

　　以上几个步骤就实现了前端的国际化框架引入。以下就是需要对每个有文字显示的地方进行处理。

二、文字显示调用方式：

　　1. 直接显示

        <router-link to="/index">{{$t('m.home_page')}}</router-link>

2. 绑定方式调用：

<span v-text="$t('m.home_page')"></span>

　　3.JS调用字段值

this.$i18n.messages[this.$i18n.locale].m.manual

vm.$i18n.messages[vm.$i18n.locale].m.manual

三、Element-UI 组件的国际化

1. 在main.js中引入


import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'


2. 语言包判断


if (currentLang === 'en-US') {
  import('../static/css/en.css')
  Vue.use(ElementUI, {enLocale})
  locale.use(enLocale)
} else {
  Vue.use(ElementUI, {zhLocale})
  locale.use(zhLocale)
}