1.首先安装: npm install vue-i18n
2.main.js 引入
import i18n from './i18n/i18n';
//挂载
new Vue({
el: '#app',
i18n,
components: { App },
template: '<App/>'
})
3.创建i18n文件夹，并在文件下i18n.js、langs文件夹，langs文件夹下建index.js、en.js、zh.js...自定义文件名
38CDF60E73DAA181314F438BA1298703.jpg
//i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n);
if(!localStorage.getItem('lang')){
localStorage.setItem('lang','zh');
}
const i18n = new VueI18n({
locale: localStorage.lang, //从localStorage中拿到用户的语言选择，如果没有，默认中文。
messages
});
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换,如没引入element则不需要
export default i18n
//zh.js
const zh = {
home:{
hello: '你好,世界'
},
// element组件翻译
el: {
colorpicker: {
confirm: '确定',
clear: '清空'
},
datepicker: {
now: '此刻',
today: '今天',
cancel: '取消',
clear: '清空',
confirm: '确定',
selectDate: '选择日期',
selectTime: '选择时间',
startDate: '开始日期',
startTime: '开始时间',
endDate: '结束日期',
endTime: '结束时间',
prevYear: '前一年',
nextYear: '后一年',
prevMonth: '上个月',
nextMonth: '下个月',
year: '年',
month1: '1 月',
month2: '2 月',
month3: '3 月',
month4: '4 月',
month5: '5 月',
month6: '6 月',
month7: '7 月',
month8: '8 月',
month9: '9 月',
month10: '10 月',
month11: '11 月',
month12: '12 月',
// week: '周次',
weeks: {
sun: '日',
mon: '一',
tue: '二',
wed: '三',
thu: '四',
fri: '五',
sat: '六'
},
months: {
jan: '一月',
feb: '二月',
mar: '三月',
apr: '四月',
may: '五月',
jun: '六月',
jul: '七月',
aug: '八月',
sep: '九月',
oct: '十月',
nov: '十一月',
dec: '十二月'
}
},
select: {
loading: '加载中',
noMatch: '无匹配数据',
noData: '无数据',
placeholder: '请选择'
},
cascader: {
noMatch: '无匹配数据',
loading: '加载中',
placeholder: '请选择',
noData: '暂无数据'
},
pagination: {
goto: '前往',
pagesize: '条/页',
total: '共 {total} 条',
pageClassifier: '页'
},
messagebox: {
title: '提示',
confirm: '确定',
cancel: '取消',
error: '输入的数据不合法!'
},
upload: {
deleteTip: '按 delete 键可删除',
delete: '删除',
preview: '查看图片',
continue: '继续上传'
},
table: {
emptyText: '暂无数据',
confirmFilter: '筛选',
resetFilter: '重置',
clearFilter: '全部',
sumText: '合计'
},
tree: {
emptyText: '暂无数据'
},
transfer: {
noMatch: '无匹配数据',
noData: '无数据',
titles: ['列表 1', '列表 2'],
filterPlaceholder: '请输入搜索内容',
noCheckedFormat: '共 {total} 项',
hasCheckedFormat: '已选 {checked}/{total} 项'
},
image: {
error: '加载失败'
},
pageHeader: {
title: '返回'
}
}
};
export default zh
//en.js
const en = {
home:{
hello: 'hello,world'
},
// element组件翻译
el: {
colorpicker: {
confirm: 'OK',
clear: 'Clear'
},
datepicker: {
now: 'Now',
today: 'Today',
cancel: 'Cancel',
clear: 'Clear',
confirm: 'OK',
selectDate: 'Select date',
selectTime: 'Select time',
startDate: 'Start Date',
startTime: 'Start Time',
endDate: 'End Date',
endTime: 'End Time',
prevYear: 'Previous Year',
nextYear: 'Next Year',
prevMonth: 'Previous Month',
nextMonth: 'Next Month',
year: '',
month1: 'January',
month2: 'February',
month3: 'March',
month4: 'April',
month5: 'May',
month6: 'June',
month7: 'July',
month8: 'August',
month9: 'September',
month10: 'October',
month11: 'November',
month12: 'December',
week: 'week',
weeks: {
sun: 'Sun',
mon: 'Mon',
tue: 'Tue',
wed: 'Wed',
thu: 'Thu',
fri: 'Fri',
sat: 'Sat'
},
months: {
jan: 'Jan',
feb: 'Feb',
mar: 'Mar',
apr: 'Apr',
may: 'May',
jun: 'Jun',
jul: 'Jul',
aug: 'Aug',
sep: 'Sep',
oct: 'Oct',
nov: 'Nov',
dec: 'Dec'
}
},
select: {
loading: 'Loading',
noMatch: 'No matching data',
noData: 'No data',
placeholder: 'Select'
},
cascader: {
noMatch: 'No matching data',
loading: 'Loading',
placeholder: 'Select',
noData: 'No data'
},
pagination: {
goto: 'Go to',
pagesize: '/page',
total: 'Total {total}',
pageClassifier: ''
},
messagebox: {
title: 'Message',
confirm: 'OK',
cancel: 'Cancel',
error: 'Illegal input'
},
upload: {
deleteTip: 'press delete to remove',
delete: 'Delete',
preview: 'Preview',
continue: 'Continue'
},
table: {
emptyText: 'No Data',
confirmFilter: 'Confirm',
resetFilter: 'Reset',
clearFilter: 'All',
sumText: 'Sum'
},
tree: {
emptyText: 'No Data'
},
transfer: {
noMatch: 'No matching data',
noData: 'No data',
titles: ['List 1', 'List 2'], // to be translated
filterPlaceholder: 'Enter keyword', // to be translated
noCheckedFormat: '{total} items', // to be translated
hasCheckedFormat: '{checked}/{total} checked' // to be translated
},
image: {
error: 'FAILED'
},
pageHeader: {
title: 'Back' // to be translated
}
}
}
export default en
//index.js 导出使用
import zh from './zh' //中文
import en from './en' //英文
import ko from './ko' //韩文
export default {
zh,
en,
ko
}
4.导航栏使用
<el-dropdown
:show-timeout="0"
:hide-timeout="0"
trigger="hover"
placement="bottom"
@command="handleSetLanguage"
>
<span class="el-dropdown-link">
{{language}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="international_up">
<!-- <el-dropdown-item command="en">English</el-dropdown-item> -->
<el-dropdown-item command="ko">한글</el-dropdown-item>
<el-dropdown-item command="zh">中文</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<script>
data() {
return {
language: "" //初始化
};
},
methods:{
//语言切换
handleSetLanguage(lang) {
this.$i18n.locale = lang;
localStorage.setItem("lang", lang); //缓存选中的语言
this.getLanguage(lang);
window.location.reload();
},
getLanguage(val) {
if (val === "zh") {
this.language = "中文";
}
if (val === "en") {
this.language = "English";
}
if (val === "ko") {
this.language = "한글";
}
},
}
</script>
5.页面使用
{{$t('home.hello')}}
6.想修改element组件内容直接修改对应键值就可以，不用修改键名
网友评论