vue-i181n（vue官方文档）

上面的链接是官方文档

我的项目需求：前端平台需要做双语国际化，任何一个显示文字的角落都需要能切换双语。

首先elementUI天生支持i18n

废话少说。

将i18n整合进VUE框架。

我是通过npm的方式，但其实官方还提供了另一种src的引入方式。

打开cmd，cd进入项目文件夹最外层，输入：

npm install vue-i18n

找到工程中main.js这个文件。

import VueI18n from 'vue-i18n'  

Vue.use(VueI18n)

定义好有关于elementUI的相关业务翻译文件。（我这边是中文和法文，具体看业务）

import zh from '@/page/international/zh.js'  //中文的业务翻译

import fr from './page/international/fr'           //法文的业务翻译

const i18n = new VueI18n({

    //locale: localStorage.getItem("language") || 'zh-CN',   // 语言标识，可以存入缓存中（但是我没用）

    //this.$i18n.locale // 通过切换locale的值来实现语言切换

    locale: 'zh-CN',   //当前语言

    messages: {

      'zh-CN': zh,

      'en-US': fr,

    }

})

zh和fr两个文件如下方式定义。(这段代码中包含踩坑，elementUI的分页和时间选择器)

let zh = {

    message: {

        nike: '耐克',

        adi: '阿迪达斯',

        nb: '新百伦',

        ln: '李宁'

    },

    el:{

        pagination:{

            goto:'前往',

            pagesize:'条/页',

            total:'共{total}条',

            pageClassifier:'页'

        },

        datepicker:{

            year: '年',

            weeks:{

                mon: '一',

                tue: '二',

                wed: '三',

                thu: '四',

                fri: '五',

                sat: '六',

                sun: '日',

            },

            months: {

                jan : '一月',

                feb : '二月',

                mar : '三月',

                apr : '四月',

                may : '五月',

                jun : '六月',

                jul : '七月',

                aug : '八月',

                sep: '九月',

                oct: '十月',

                nov: '十一月',

                dec: '十二月',

            },

            month1: '1月',

            month2: '2月',

            month3: '3月',

            month4: '4月',

            month5: '5月',

            month6: '6月',

            month7: '7月',

            month8: '8月',

            month9: '9月',

            month10: '10月',

            month11: '11月',

            month12: '12月',

        }

    },

}

export default zh;

整合进elementUI（框架还用了AVUE.js,如果没用就自动忽略掉下面块）

Vue.use(ElementUI,  {

  size: 'medium',

  menuType: 'text',

  i18n: (key,value) =>i18n.t(key,value)

  }

)

Vue.use(window.AVUE, {

  size: 'medium',

  menuType: 'text',

  i18n: (key,value) =>i18n.t(key,value)

})

整合进VUE

new Vue({

  router,

  store,

  i18n,

  render: h => h(App)

}).$mount('#app')

//router和store是本身框架里自带的，找到这句话把i18n加进去就OK了。

到目前为止，整合工作就完毕了。

第二步了，使用方法

this.$i18n.locale 

i18n通过这段代码获取当前语言，进而控制全局。有点类似vuex。

全局范围内都能获取到该代码的动态。

在文本中使用：

<span>{{ $t("message.count") }}</span>

在组件中使用：

<el-tab-pane :label="$t('message.day')" name="first">

        <v-chart :options="dayCumulate"/>

</el-tab-pane>

在js中使用(这块有个坑，如果想在js中使用,需要加如下一句代码)：

import Vue from 'vue' 

//这句话和引入方法或js之类的一样，必须写入，要不js中不好使，具体原因我不是很清楚，但是如果谁看到这里可以留言一下也解答一下我的疑惑，我也想知道知道，之后如果我有空余时间查询到原因也会过来补充。

  data() {

    return {

        title: {

          text: this.$t('message.exitAndEntryFlowStatisticsChart'),

        },

    }

}

第三步就是具体在代码中我是如何实现切换语言的

通过点击的方式全局进行切换，下面上代码。

<template>

    <el-dropdown trigger="click" @command="handleCommand">

    <span class="el-dropdown-link">

        <i class="el-icon-turn-off el-icon--right"></i>

    </span>

    <el-dropdown-menu slot="dropdown">

        <el-dropdown-item command="zh-CN">中文</el-dropdown-item>

        <el-dropdown-item command="en-US">法语</el-dropdown-item>

    </el-dropdown-menu>

    </el-dropdown>

</template>

<script>

export default {

    data() {

        return{

        }

    },

    methods:{

      handleCommand(command) {

        this.$i18n.locale = command;

      }

    }

}

</script>

//这样就实现了如何全局切换locale的操作，其他页面就能获取到这个全局变量的动作了。

//TODO       2020.02.24 12:19

剩下的之后再来补。