你可能不知道i18n国际化$t的用法？

1、安装并引入i18n1，安装vue-i18n依赖包；使用NPM安装或CNPM安装。npminstallvue-i18n--save-dev2，这里以vue项目为例，在vue实例中引入i18n，首先在main.js中引入vue-i18n。这里是i18n的包i18n.jsimportVuefrom'vue';importVueI18nfrom'vue-i18n';//导入iview自带的语言包importzhfrom'view-design/dist/locale/zh-CN';从'view-design/dist/locale/en-US'导入en；从'./lang/zh.json'导入appZh；从'./lang/en.json'导入appEn；Vue.use(VueI18n)；//合并本地语言包和iview语言包constmessages={en_US:Object.assign(appEn,en),zh_CN:Object.assign(appZh,zh),};//获取本地系统语言constnavLang=导航器.language;constlocalLang=(navLang==='zh_CN'||navLang==='en_US')?navLang:false;constlang=localLang||'zh_CN';Vue.config.lang=lang;exportdefaultnewVueI18n({locale:lang||'en_US',//当语言不存在时使用默认语言fallbackLocale:'en_US',messages,});从“vueinmain.js”引入i18n.jsmain.jsimportVue；从“view-design”导入iView；从“./App.vue”导入App；从“@/router”导入路由器；从“@”导入store/store";从'./locales/i18n'导入i18n;Vue.use(iView,{i18n:(key,value)=>i18n.t(key,value)})Vue.prototype.$t=(key,value)=>i18n.t(key,value)newVue({router,store,i18n,render:h=>h(App)}).$mount("#app");这里创建一个$t实例对象，方便全局调用2.国际化使用1.模板中变量的使用2.{{}}的使用在模板{{$t('test')}}3.在本地过滤器中的使用（解决这个指向问题）{{item|itemFilter(getKey)}}filters:{itemFilter(status,getKey){switch(status){案例0:returngetKey('start');情况1：返回getKey('end');默认值：返回''；}},},方法：{getKey(arg){consthasKey=this.$t(arg);if(hasKey){常量结果=this.$t(arg);返回结果；}返回参数；},},4.在全局过滤器中的使用//referencei18importi18nfrom'@/locales/i18n';functiontestStatus(status){if(status==0){returni18n.t('start');}if(status==1){returni18n.t('end');}return'--';}export{testStatus,};5.变量$tusagezh.json"total_person":"公司共有{msg1}人，其中高级前端工程师{msg2}人",{{$t('total_person',{msg1:'1000',msg2:'60'})}}这里可以传入变量msg1和msg2，方便翻译和使用。页面显示结果为公司总人数1000人，其中高级前端工程师60人