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="width: 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項目，雖沒什么技術含量。但不要隨意轉載，如需轉載保存，請署上 轉載地址。謝謝配合。有問題隨時交流，不怕打擾。