vue根据请求头自动实现国际化

一、创建文件在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>

五、设置浏览器语言以谷歌为例如图：把英语放在最顶部