前端 Vue实现国际化（可自动获取用户语言并切换

前言

由于最近项目做到了需求前端判别用户使用的不同语言并且进行自动切换语言，所以想着记录一下。

一、环境准备

我们需要准备开发环境，我这里使用vue-cli官方脚手架搭建了一个vue的开发环境。

二、安装 vue-i18n

我这里使用npm安装依赖

$ npm install vue-i18n

三、引入 vue-i18n

这里我是在main.js中引入vue-i18n

//多语言切换
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  // locale: '', // 语言标识
  messages: {
    //中文
    'zh-CN': require('./common/lang/zh-CN'),
    //英文
    'en-US': require('./common/lang/en-US'),
    //同理，以下可以引多种语言
  }
})

这时我们可以全局调用这个i18n的实例对象，通过改变this.$i18n.locale的值来改变语言，但这时我们还没有语言切换的条件以及语言包

此时我们再创建一个lang语言文件夹,在lang中创建我们需要的语言包

四、编辑语言包

比如我们在中文zh-CN.js中编辑

module.exports = {
  login: {
   'loginPassword':'请输入登录密码',
   'password': '密码登录',
   'passcode': '验证码登录',
   'signin': '登  录',
 }
  }

同时我们需要在英文en-US.js中编辑

module.exports = {
  login: {
    'loginPassword': 'Please enter your login password',
    'password': 'Login',
    'passcode': 'SMS Login',
    'signin': 'Sign In',
  },
}

注意我们的每个语言包都是对应的

五、在页面中使用语言包

那么我们怎么在页面中去使用我们的语言包呢，这里有两种使用方式

1. this.$t(’’) 比如使用动态属性 如v-text 等 以及接口数据等地方都可以使用这种方式渲染

 tabList:[{name:this.$t('login.password'),path:'/login/pwdlogin'}]

2. {{$t(’’)}}则可以直接在标签内部渲染

<router-link to="/reg">{{$t('register.signup')}}</router-link>

好了既然可以渲染语言包那么最重要的一步我们需要去触发改变语言了

六、触发改变语言

自动识别用户使用语言自动切换语言

先说前端怎样自动识别用户语言然后自动切换语言，我们可以使用navigator.language得到用户使用的语言，那么我们在App.vue中可以判别

 methods: {
   autoChange() {
     switch (navigator.language) {
       case "en":
         this.$i18n.locale = "en-US";
         break;
       case "zh-CN":
         this.$i18n.locale = "zh-CN";
         break;
     }
   }
 },
 created() {
   this.autoChange();
 },

这样，我们就可以通过浏览器自动识别语言自动切换语言了。

国际化方式很多，我只是分享到了一种如有不足欢迎指出。