安装国际化语言插件vue-i18n:
npm install vue-i18n --save
本文使用的i18n版本:
8.10.0
1.创建语言包:
CH.json
{
"errText": {
"err_tel": "手机号码格式错误!",
}
}
EN.json
{
"errText": {
"err_tel": "Mobile phone number format error!",
}
}
2.main.js中配置:
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'en',
messages: {
'zh': Object.assign(require("@/assets/lang/CH.json"), zhLocale),
'en': Object.assign(require("@/assets/lang/EN.json"), enLocale)
}
})
locale.i18n((key, value) => i18n.t(key, value))
new Vue({
render: h => h(App),
i18n
}).$mount('#app')
3.在页面中使用
<el-input :placeholder="$t('errText.err_tel')"></el-input>
<p>{{$t('errText.err_tel')}}</p>
4.语言切换
<button @click="toggleLang('zh')" :disabled="$i18n.locale == 'zh'">中文</button>
<button @click="toggleLang('en')" :disabled="$i18n.locale == 'en'">英文</button>
toggleLang(lang) {
if(lang == 'zh'){
localStorage.setItem('lang', 'zh')
this.$i18n.locale = localStorage.getItem('lang')
this.$message({
message: '切换为中文!',
type: 'success'
})
} else if (lang == 'en') {
localStorage.setItem('lang', 'en')
this.$i18n.locale = localStorage.getItem('lang')
this.$message({
message: 'Switch to English!',
type: 'success'
})
}