VueJS 使用i18n做国际化切换中英文

1、安装

npm install vue-i18n --save

2、创建存放语言包和i18n入口文件

　　a、在src下创建i18n目录

　　b、在src/i18n/创建i18n.js  （入口）

　　c、在src/i18n/创建langs目录存放语言包

　　d、在src/i18n/langs/创建en.js(英文) 和 zh.js(中文)两个文件

　　

i18n.js

i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
//import messages from './langs'

//自定义中英文包
import zh from './langs/zh'
import en from './langs/en'

//element 中英文包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)

const messages = {
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)
}
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
/*const i18n = new VueI18n({
    locale: localStorage.lang || 'zh',
    messages,
})*/
const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'en',
  messages 
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
console.log('%c当前缓存语言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
export default i18n

en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    //所有侧导航的name
    slideBar:{
        overall:'Overview',
        servicevolume:'Service Volume',
        visitvolume:'Visit Volume',
        users:'User Volume',
        multimediausage:'Multimedia Volume',
        servicefficiency:'Service Efficiency',
        solvedstatus:'Helpful Rate',
        transferredrate:'Transfer Rate',
        cast:'CSAT',
        kgperformance:'KG Performance',
        question:'Questions',
        outofscopeanalysis:'Question Distribution',
        sessionflow:'Session Flow',
        handingtime:'Handling Time',
        handingturns:'Handling Turns',
        leavingstatus:'Leaving Status',
        customerjourney:'Customer Journey',
        download:"DownLoad"
    },
    
    //所有的筛选器name
    select:{
        country:'Country',
        datarange:'Date Range',
        timeUnit:'Time Unit',
        channel:"Channel",
        kgLevel:"KG Level",
        domain:"Domain",
        intent:"Intent",
        slot:"Order"
    },

    //页面中图表指标 的name
    indicatorBar:{
        totalVisits:"Total Visits",
        totalUsers:"Total Users",
        helpfulRate:"Helpful Rate",
        transferRate:"Transfer Rate",
        CSATRate:"CSAT",
        newUsers:"New Users",
        repeatUser:"Repeat Users",
        solvedCases:"Helpful Cases",
        solvedRate:"Helpful Rate",
        transferredCases:"Transfer Cases",
        trnasferredRate:"Transfer Rate" 
    },
    
    //页面中tab选项卡name
    Tab:{
        totalVolume:"Total Volume",
        channel:"Channel Comparison",
        user:"User Distribution",
        userVolume:"User Volume Trend",
        repeatUser:"Repeat User Distribution",
        solvedRate:"Helpful Rate",
        solvedUnsolvedQuestions:"Solved/Unsolved Questions",
        transfered:"Transfer Rate",
        transferedQuestion:'Transfer/Not Transfer Questions'
    },
    //下载页
    download:{
        tab:{
            tabOne:"ChatLog Data",
            tabTwo:"Visit Data",
            tabThree:"User Data"
        },
        ele:{
            datapickerName:"Period",
            selectName:"Visit Access Channel",
            until:"until"
        },
        btn:{
            download:"DownLoad"
        }
    },

    //element 组件
    element:{
        loadingText:"Loading..."
    },

    //时间单位（备用）
    dateLabel:{
        years:"years",
        month:"month",
        week:"week",
        day:"day"
    }
}
export default en;

zh.js

const cn = {
    //所有侧导航的name
    slideBar: {
        overall: '整体概览',
        servicevolume: '服务数量',
        visitvolume: '访问量',
        users: '用户量',
        multimediausage: '输入类型',
        servicefficiency: '服务效果',
        solvedstatus: '解决情况',
        transferredrate: '转人工表现',
        cast: '用户满意度',
        kgperformance: '知识表现',
        question: '问题分布',
        outofscopeanalysis: '对话流程',
        sessionflow: '对话流程',
        handingtime: '解决时长',
        handingturns: '解决轮数',
        leavingstatus: '结束离开状态',
        customerjourney: '用户路径',
        download:"下载"
    },

    //所有的筛选器name
    select: {
        country: '国家',
        datarange: '时间区间',
        timeUnit: '时间单位',
        channel: "渠道",
        kgLevel: "知识层级",
        domain: "域",
        intent: "意图",
        slot:"排序"
    },
    //页面中图表指标 的name
    indicatorBar: {
        totalVisits: "访问总量",
        totalUsers: "用户总量",
        helpfulRate: "解决率",
        transferRate: "转人工率",
        CSATRate: "用户满意度",
        newUsers: "新用户",
        repeatUser: "重复访问用户",
        solvedCases: "解决数量",
        solvedRate: "解决率",
        transferredCases: "转人工数量",
        trnasferredRate: "转人工率"
    },
    //页面中tab选项卡name
    Tab: {
        totalVolume: "访问总量",
        channel: "访问渠道对比",
        user: "用户国家分布",
        userVolume: "用户访问趋势",
        repeatUser: "重复用户分布",
        solvedRate: "解决率",
        solvedUnsolvedQuestions: "解决/未解决的问题分布",
        transfered: "转人工率",
        transferedQuestion:'转人工/未转人工的问题分布'
    },
    //下载页
    download:{
        tab:{
            tabOne:"日志下载",
            tabTwo:"访问数据下载",
            tabThree:"用户数据下载"
        },
        ele:{
            datapickerName:"时间区间",
            selectName:"访问渠道",
            until:"至"
        },
        btn:{
            download:"下载"
        }
    },

    //element 组件
    element:{
        loadingText:"拼命加载中..."
    },

    //时间单位（备用）
    dateLabel:{
        years:"年",
        month:"月",
        week:"周",
        day:"日"
    }
}

export default cn;

3、main.js中引用src/i18n/i18n.js入口文件

//引入vue 和 router模块
import Vue from 'vue'
import App from './App'
import router from './router'
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import i18n from './i18n/i18n'

Vue.use(ElementUI)
Vue.config.productionTip = false

let gvm = new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

4、找一个vue文件（header.vue）

a、创建模板--> 下拉组件，有中英文两个选项

<template>
    <div class="navbar">
        <span>Concept Tree Engineer</span>
        <p></p>
        <el-select style=" 87px;" size="mini" v-model="value" @change="toggleLang" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
            </el-option>
        </el-select>
    </div>
</template>

b、创建script （配置默认为英文、配置下拉选择切换语言、配置首次进入获取用户缓存的语言进行显示）

<script>
    export default {
        name: 'Navbar',
        data() {
            return {
                options: [{
                    value: 'en',
                    label: 'English'
                }, {
                    value: 'zh',
                    label: '中文'
                }],
                value: 'en'
            }
        },
        mounted(){
            //用户每次刷新页面都判断 是否缓存过 语言，缓存过的话 选择其中显示的应该是缓存的语言
            localStorage.getItem('locale') == 'en' ? this.value = 'en' : this.value = 'zh'
        },
        methods: {
            toggleLang(lang) {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t("element.loadingText"),
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(function(){
                    loading.close();
                },600)
                if(lang == 'zh') {
                    localStorage.setItem('locale', 'zh')
                    this.$i18n.locale = localStorage.getItem('locale')
                } else if(lang == 'en') {
                    localStorage.setItem('locale', 'en')
                    this.$i18n.locale = localStorage.getItem('locale')
                }
            }
        }
}
</script>

总结：

　　1、this.options 配置的是下拉框显示的option 和 选择后的value

　　　  this.value 是用户选择后双向绑定的 options.[index].value

　　2、toggleLang(lang)：用户选择后，调用toggleLang方法，判断是 选择的是英文 还是 中文。

　　　  如果是中文：将中文缓存起来，并且赋值给全局的i18n对象的locale。完成切换。

　　　  如果不是：将英文缓存起来，并且赋值给全局的i18n对象的locale。完成切换。

　　3、mounted()：vue生命周期钩子挂载完成后，获取缓存中的语言代码，绑定给下拉的vue。作用是，根据缓存的语言代码，设置下拉选项默认显示什么。

最后：展示成果

   

　　本文档意在与帮助初学者快速构建vue项目，虽没什么技术含量。但不要随意转载，如需转载保存，请署上 转载地址。谢谢配合。有问题随时交流，不怕打扰。