vue国际化-vue-i18n的配置

1、前提基础

• 对vue.js、vuex等有基本的了解
• element国际化配置

2、安装依赖

npm i -S element-ui vue-i18n js-cookie
复制代码

• 安装js-cookie是为了将当前选择的语言保存并在下一次打开时默认选择。

3、代码分析

• 准备本地的翻译信息，在src下新建lang文件夹，新建文件zh.js，en.js。

zh.js
export default {
  common: {
    confirm: '确定',
    cancel: '取消',
    home: '首页'
  },
  login: {
    login: '登录',
    logout: '退出'
  },
  header: {
    message: '这是公共的头部组件'
  },
  footer: {
    message: '这是公共的底部组件'
  }
}

en.js
export default {
  common: {
    confirm: 'confirm',
    cancel: 'cancel',
    home: 'home'
  },
  header: {
    message: 'this is a common header component'
  },
  footer: {
    message: 'this is a common footer component'
  },
  login: {
    login: 'login',
    logout: 'logout'
  }
}
复制代码

• 创建VueI18n实例，使用创建的翻译信息，在lang文件下新建index.js文件

import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}
const i18n = new VueI18n({
  locale: 'zh',
  messages
})
export default i18n
复制代码

• 在 main.js 中引入 vue-i18n，并挂在在vue实例中。

import Vue from 'vue'
import i18n from './lang'
Vue.use(i18n)

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 便于可以直接在组件中通过this.$i18n使用，也可以按需引用
  render: h => h(App)
})
复制代码

4. 开始使用，新建.vue文件。在页面中通过$t()方法使用。

<template>
  <div class="common_header">
    <el-row>
      <el-col :span="12">
        {{$t('header.message')}}
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="login">{{$t('login.login')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
复制代码

由于我们VueI18n中定义的是中文，这是页面显示的'这是公共的头部组件'，login: '登录'，修该VueI18n实例属性locale的值为en，刷新页面，页面显示 'this is a common header component'，'login',说明多语言配置成功。

4、代码优化

问题一

• 到这里还存在一些问题，现在我们都是手动的修改VueI18n实例属性locale的值为en/zh来实现语言的切换。

1. 在页面中加入切换语言的控件：

<el-select v-model="language" placeholder="请选择语言" @change="changeLanguage">
  <el-option
    v-for="item in languageOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
复制代码

2. 加入一个选择语言的下拉框，修改locale的值为选择的语言。

changeLanguage (language) {
  this.$i18n.locale = language
}
复制代码

切换语言时，页面将自动完成语言类型的切换。

问题二

• 刷新页面之后初始化，将还原为默认值。

1. 将language信息保存在cookie（之前已经安装了js-cookie）。初始化从cookie中获取。

const i18n = new VueI18n({
  locale: Cookies.get('language') || 'zh', 
  messages
})

切换语言时候保存到Cookies

Cookies.set('language', language)
复制代码

这是再去刷新页面，将会采用最后我们保存在cookie中的语言。

问题三

• 切换语言的控件没有变。

1. 为了方便使用，切换时可以在vuex中保存language信息

changeLanguage (v) {
  this.$store.dispatch('switchLanguage', v)
  this.$i18n.locale = v
}

在state中：
language: Cookies.get('language') || 'zh'
复制代码

2. 根据当前的语言类型动态的计算。

languageOptions () {
  let languageOptions
  if (this.$store.state.language === 'zh') {
    languageOptions = [
      {
        value: 'zh',
        label: '中文'
      },
      {
        value: 'en',
        label: '英文'
      }
    ]
  } else {
    languageOptions = [
      {
        value: 'zh',
        label: 'Chinese'
      },
      {
        value: 'en',
        label: 'English'
      }
    ]
  }
  return languageOptions
}
复制代码

效果如下：

问题四

• 到这里已经差不多完成了，其实还有个问题。就是如果使用了element-ui，element组件无法实现多语言的页面。这里还涉及到手动处理 vue-i18n@6.x 兼容性问题，官网已经做了详细介绍。

1. 引用element的语言包

import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
复制代码

2. 添加到翻译信息

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
复制代码

3. 兼容vue-i18n@6.x，修改main.js

Vue.use(i18n)
修改为
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
复制代码

4. 页面效果如下：

5、总结

1. 到这里关于vue-i18n的使用以及介绍完了。
2. 几个关键点在于实现locale的自动切换、如何使语言信息（$t()方法）、element-ui组件的多语言实现、兼容性等。