i18n初实践

公司的项目应用了国际化，让项目可以进行语言的切换。研究了一下，实际上是用vue-i18n来实现多语言切换，从而实现国际化的需求。第一次接触国际化，简单记录一下。

1.安装依赖

npm install vue-i18n

也可以通过脚本引入：

<script src="https://unpkg.com/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js">script>

2.配置main.js文件

import Vue from 'vue';
import App from './App.vue';
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
/*---------挂载全局使用-----------*/
Vue.use(VueI18n);
Vue.use(ElementUI);
/*---------基本使用-----------*/

// /*---------使用语言包-----------*/
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  messages: {
    'zh-CN': require('./assets/common/cn'), // 中文语言包
    'zh-EN': require('./assets/common/en'), // 英文语言包
    'zh-FA': require('./assets/common/fa'), // 法语语言包
    'zh-FT': require('./assets/common/ft') // 繁体字语言包
  }
});

new Vue({
  i18n, // 注意这里
  render: h => h(App)
}).$mount('#app');

3.对应的语言包进行配置：

src/assets/common下面的文件：

//  cn.js
export const message = {
    music: '网易云音乐',
    findMusic: '发现音乐',
    myMusic: '我的音乐',
    friend: '朋友',
    musician: '音乐人',
    download: '下载客户端'
}
//  en.js
export const message = {
    music: 'Music',
    findMusic: 'FIND MUSIC',
    myMusic: 'MY MUSIC',
    friend: 'FRIEND',
    musician: 'MUSICIAN',
    download: 'DOWNLOAD'
}
// fa.js
export const message = {
  music: 'Musique pour netease cloud',
  findMusic: 'Découvrir la musique',
  myMusic: 'De ma musique',
  friend: 'Des amis',
  musician: 'Le musicien',
  download: 'Télécharger le client'
}
// ft.js
export const message = {
  music: '網易雲音樂',
  findMusic: '發現音樂',
  myMusic: '我的音樂',
  friend: '朋友',
  musician: '音樂人',
  download: '下載客戶端'
}

4.测试demo文件，进行语言包实践

<template>
  <div class="international">
    
    <div class="language">
      <el-select
        v-model="value"
        placeholder="请选择"
        @change="changeLangEvent(value)"
      >
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        >el-option>
      el-select>
    div>
    
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('message.music')" name="first">
          {{$t('message.music')}}
        el-tab-pane>
        <el-tab-pane :label="$t('message.findMusic')" name="second">
          {{$t('message.findMusic')}}
        el-tab-pane>
        <el-tab-pane :label="$t('message.myMusic')" name="third">
          {{$t('message.myMusic')}}
        el-tab-pane>
        <el-tab-pane :label="$t('message.friend')" name="fourth">
          {{$t('message.friend')}}
        el-tab-pane>
        <el-tab-pane :label="$t('message.musician')" name="fivth">
          {{$t('message.musician')}}
        el-tab-pane>
        <el-tab-pane :label="$t('message.download')" name="sixth">
          {{$t('message.download')}}
        el-tab-pane>
      el-tabs>
    div>
  div>
template>

<script>
  export default {
    name: 'vueInternationalI18n',
    data() {
      return {
        value: 'zh-CN',
        lang: 'zh-CN',
        activeName: 'first',
        options: [
          {
            value: 'zh-CN',
            label: '中文'
          },
          {
            value: 'zh-EN',
            label: '英文'
          },
          {
            value: 'zh-FA',
            label: '法语'
          },
          {
            value: 'zh-FT',
            label: '繁体'
          }
        ]
      };
    },
    methods: {
      handleClick() {},
      // 切换语言
      changeLangEvent(value) {
        switch (value) {
          case 'zh-CN':
            this.lang = value;
            this.$i18n.locale = this.lang; //关键语句
            break;
          case 'zh-EN':
            this.lang = value;
            this.$i18n.locale = this.lang; //关键语句
            break;
          case 'zh-FA':
            this.lang = value;
            this.$i18n.locale = this.lang; //关键语句
            break;
          case 'zh-FT':
            this.lang = value;
            this.$i18n.locale = this.lang; //关键语句
            break;
          default:
            break;
        }
      }
    }
  };
script>
<style lang="css">
  .international {
    width: 75vw;
    margin: 0 auto;
  }
  .language {
    position: absolute;
    right: 12.5vw;
    z-index: 20000000;
  }
  .tabs {
    margin-top: 15px;
  }
style>

几个要点：

• changeLangEvent 事件实现语言切换；
• 重点在于"关键语句"：this.\$i18n.locale： 当赋值为"zh-CN"时，导航栏就变成中文； 当赋值为 "zh-EN“时，导航栏就变成英文； 当赋值为”zh-FA“时，导航栏就变成法语； 当赋值为”zh-FT"时，导航栏就变成中文繁体。

数据渲染的模板应该是：

<div v-text="$t('m.music')">div>


<div>{{$t('m.music')}}div>

在实际应用中，每个文件都需要进行上面的模板渲染。

5.更多

参考官网vue-i18n官网：https://kazupon.github.io/vue-i18n/zh/introduction.html

6.疑问

• 如何自动获取本地语言，然后加载不同的语言包？

  一般实践中，可以将用户习惯的语言类型作为一个字段存储在localStorage上面，前端加载项目的时候，将localStorage中的字段读取出来，然后加载语言包。实际上，也可以将这个字段作为用户名下的一个属性，绑定在一起，当用户登录进去时，读取这个字段，然后加载对应的语言包。

• 一个小优化的地方

  查看了项目代码，项目中用了懒加载的方式进行语言包的加载，这是一个小小的优化点。

  定义一个$loadLanguage方法来实现：

// @/i18n/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: 'zh-CN',
  messages: {}
})

// 懒加载语言包
Vue.prototype.$loadLanguage = lang => {
  import(`@/i18n/lang/${lang}`).then(messages => {
    i18n.setLocaleMessage(lang, messages.default)
    i18n.locale = lang
    return lang
  })
}

export default i18n

• 如果是在js文件中引用i18n的字段，应该怎么写？

import i18n from '@/i18n'
export default {
    refundRulesMap: {
      // 退费规则对照表
      absence: i18n.t('1351.absence_day'),
      casualLeave: i18n.t('1351.personal_leave_single_day'),
      sickLeave: i18n.t('1351.sick_leave_single_day'),
      absenceMore: i18n.t('1351.daily_absence_of_more_than_5_d'),
      casualLeaveMore: i18n.t('1351.personal_leave_of_more_than_5'),
      sickLeaveMore: i18n.t('1351.sick_leave_more_than_5_days_pe')
    },
}

或者：

this.$t('1351.absence_day')

7.代码地址

https://gitee.com/yanwuhc/i18n-demo.git