一、创建文件在src下创建文件i18n文件,在它下创建i18n.js文件如图
二、在assets下创建lang目录,在其下在创建en.js和cn.js两文件如图:
en.js(英语)
module.exports = {
base : {
loginerroe:"你的会话已过期,请重新登录",
next:"下一步"
}
}
cn.js(中文)
module.exports = {
base : {
loginerroe:"Your session has expired, please login again!",
next:"Next step"
}
}
三、编写i18n.js文件
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
zh: require('../assets/lang/cn'),
en: require('../assets/lang/en'),
}
//获取请求头语言
let language = navigator.language;
截取请求头前两位
language = language.substr(0, 2);
export default new VueI18n({
locale: language, // 这里也可以直接保存到本地
messages, // set locale messages
})
四、页面获取
<template>
<div id="app">
//在标签获取
<input :value="$t('login.UserLogin')"/>
//直接获取
{{$t('login.UserLogin')}}
</div>
</template>
<script>
//在script中获取
export default {
name: 'App'
return:{
message:this.$t('login.UserLogin')
}
}
</script>
<style>
</style>
五、设置浏览器语言以谷歌为例如图:把英语放在最顶部