今天我们就来说说，怎么玩转那个超棒的JavaScript框架Vue，还有它为什么能在支持各种语言和国际化为用户提供良好体验？现在全球化+互联网都这么牛了，那些让大家满意的网站当然得支持好几种语言啦～所以学会这招真的挺关键哒！
选择合适的国际化库
想要搞定多语言和全球化？别愁，找好使的国际化插件就能解决！现在最流行的就是vue-i18n和vue-intl这俩。vue-i18n直观好用，亲民易学，用着舒心；而vue-intl基于Format.js，功能强大，随时调整，随你心意挑选。
使用vue-i18n实现多语言和国际化
看一下Vue-i18n这个神奇的工具，只要懂了它，Vue就能处理多种语言和全球化问题！首先，在main.js里搞个初始化，就像安装插件那样将Vue-i18n加载进来。别忘了，创建VueI18n实例时还得带上个叫 messages 的对象，里面塞满你要的语言包就可以了。
npm install vue-i18n
定义语言包内容
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: 'zh-CN',
messages: {
'zh-CN': require('./locales/zh-CN.json'),
'en-US': require('./locales/en-US.json'),
},
});
new Vue({
i18n,
}).$mount('#app');
这个表格不就是把不同的语言或文本分到各自的方块里吗？这样整理起来是挺方便的想怎么改都行！
在Vue组件中使用多语言和国际化
用Vue来弄多语言和国际化就像玩儿似的，只需要把$t()这个小神器用上，文字立马能看懂。更给力的是，它还可以自动辨认语言，展示相应内容，实在太牛了！
// zh-CN.json
{
"hello": "你好",
"world": "世界"
}
// en-US.json
{
"hello": "Hello",
"world": "World"
}
动态切换语言环境
亲爱的，想学习新外语？来我们这边找工具vue-i18n，它能轻松转化语言。操作简单得很，更改 this.$i18n.locale，选上你钟爱的语种即可。然后凡是带有Vue组件的地方都会刷新呈现，最终页面直接换成新语言
{{ $t('hello') }}
{{ $t('world') }}
格式化日期和时间
首先，把语言包里的日期和时间设置下，就能随心所欲地显示！使用$d()这个公式就能搞定，简洁明了又好看。无论在哪儿都能用得溜溜的！
格式化数字和货币
this.$i18n.locale = 'en-US';
哎呀妈$n()函数能搞定数字跟货币格式，用了这个方法，我们的App肯定是超级炫酷的，不管在哪儿都不怕习惯问题了。
总结
想搞个全球化项目不？看看网上那些多语言网站吧,这样咱们开发的时候能照顾到世界各地的朋友们哒！我给你介绍下拉风的Vue,好多好用又灵活的插件和库，让你解决问题轻而易举。看了这篇文章，你就会知道如何在Vue项目中搞定多语言和国际化这些高大上的操作了，用在自己的项目上也超简便！
{{ $d(new Date(), 'short') }}
{{ $d(new Date(), 'long') }}
评论0