有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。
我们使用npm安装vue-i18n。
npm install vue vue-i18n --save
首先在 main.js 中引入 vue-i18n。
import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
接着创建带有选项的 VueI18n 实例。
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh-CN',
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./lang/zh'), // 中文语言包
'en-US': require('./lang/en') // 英文语言包
}
})
注意实例中加载了中英文两个语言包。分别准备两个语言包, 使用require引入到main.js中:
中文语言包:zh.js
export const m = {
welcome: '欢迎来到北京',
today: '今天是',
week: {
sun: '星期日',
mon: '星期一',
tues: '星期二',
wed: '星期三',
thur: '星期四',
fri: '星期五',
sat: '星期六'
}
}
英文语言包: en.js
export const m = {
welcome: 'Welcome to Beijing.',
today: 'Today is ',
week: {
sun: 'Sunday',
mon: 'Monday',
tues: 'Tuesday',
wed: 'Wednesday',
thur: 'Thursday',
fri: 'Friday',
sat: 'Saturday'
}
}
然后把 i18n 挂载到 vue 根实例上:
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
我们先建立模板:
<button @click="changeLang">切换语言</button>
<h1>{{$t('m.welcome')}}</h1>
<h3>{{$t('m.today')}}{{weekname}}</h3>
注意用法,在组件的模板template中,调用$t()方法,{{$t('m.welcome')}}表示使用welcome的语言。如果是在组件的script中,调用this.$i18n.t()方法获取语言,下文会讲到。
我们想通过点击“切换语言”按钮,来对模板中的文字内容进行相应的语言切换。
那我们就在方法changeLang()中这样写:
changeLang() {
this.lang = localStorage.getItem('locale') || 'zh-CN';
if ( this.lang === 'zh-CN' ) {
this.lang = 'en-US';
this.$i18n.locale = this.lang;
} else {
this.lang = 'zh-CN';
this.$i18n.locale = this.lang;
}
localStorage.setItem('locale', this.lang);
let week = this.getWeek();
this.weekname = week;
},
我们先在本地存储中获取locale的值,如果不存在则默认为zh-CN。然后在判断当前语言是中文还是英文,如果是中文则切换成英文,反之亦然。通过this.$i18n.locale实现语言的切换。
我们希望浏览器保存每次切换后的语言,用户刷新页面的时候会自动识别语言。因此我们使用localStorage本地存储来保存每次设置后的语言,当然你也可以使用coockie实现。
有时候我们要在js部分处理多语言,例如以下getWeek()部分实现了当前是星期几的代码,仅供参考。
getWeek() {
let week = new Date().getDay();
let day = 'm.week.sun';
switch (week) {
case 0:
day = 'm.week.sun';
break;
case 1:
day = 'm.week.mon';
break;
case 2:
day = 'm.week.tues';
break;
case 3:
day = 'm.week.wed';
break;
case 4:
day = 'm.week.thur';
break;
case 5:
day = 'm.week.fri';
break;
case 6:
day = 'm.week.sat';
break;
}
return this.$i18n.t(day);
}
以上就是使用vue-i18n实现中英文语言切换效果的详细内容。有关vue-i18n的更多用法可以参考项目地址:http://kazupon.github.io/vue-i18n/
internationalization (国际化)简称:i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n。 一般用语言_地区的形式表示一种语言,如:zh_CN表示简体中文
一般来讲,要翻译的文字比较多,所以最好为每门语言建立独立文件管理. 新建文件 lang/zh.js、 lang/en.js, 写入一些测试数据,下面去封装一个组件,用来切换语言,并将语言状态保存到cookie和Vuex中。
新建目录结构如下:assets/langs/index.js内容如下:loadLanguageAsync是实际用于更改语言的函数。比如在路由钩子中获取到当前语言环境加载对应语言包
我遇到过一些人,他们根本不认为CSS与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别,这些细微的差别会影响到母语人士使用您的网站的体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!