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/>'
 })

main.js

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项目，虽没什么技术含量。但不要随意转载，如需转载保存，请署上 转载地址。谢谢配合。有问题随时交流，不怕打扰。