VUE-i18n国际化

VUE_i18n国际化

1.安装i18n

npm install vue-i18n

2.引入i18n（main.js）

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)


const i18n = new VueI18n({
  locale: 'en',
   // locale: VueCookie.get('language') == null ? 'zh' : VueCookie.get('language'), 
  messages: {
    en: {
      loginTxt: 'login',
      change: 'changeLuange'
      username: 'username',
      password: 'password'
    },
    zh: {
      loginTxt: '登录',
      change: '语言切换',
      username: '用户名',
      password: '密码'
    }
  }
})


new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: {App}
})

3.使用

 <el-button class="login-btn-submit" type="primary" @click="chanangLanung()">{{$t('loginTxt')}}</el-button>


   chanangLanung () {
        if (this.$i18n.locale==='en'){
          this.$i18n.locale='zh'
 		  this.$cookie.set('language', "zh")
        }else{
          this.$i18n.locale='en'
          this.$cookie.set('language', "en")
        }
      }

4.请求头拦截

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  config.headers['language']=Vue.cookie.get('language') // 带上请求语言
  return config
}, error => {
  return Promise.reject(error)
})