Vue-I18n国际化的使用(这里演示的是vue2)

官方网址

安装

//版本不能错(必须指定版本,因为最新版本支持vue3不支持vue2)
npm install vue-i18n@8
//这里讲解的用的以下针对vue2的版本(上面那个是官网版本)
npm i vue-i18n@6 -S

在main.js的配置

import Vue from 'vue'
import App from './App.vue'
//导入
import VueI18n from 'vue-i18n'
Vue.config.productionTip = false
//这里需要注册一下
Vue.use(VueI18n)

const i18n = new VueI18n({
    
    
  locale: 'zh', //默认语言
  messages: {
    
    
  //en,zh对应的是locale的值,这个值就是当前的语言
    en: {
    
    
    //这里面的参数随意,但是每个语言的键要保持一致
      login: 'login',
      change: 'change'
    },
    zh: {
    
    
      login: '登录',
      change: '切换'
    }
    //.....以下还可以配置更多国家
  }
})

new Vue({
    
    
//上面配置完了,这里要挂载一下
  i18n,
  render: h => h(App),
}).$mount('#app')

app.vue的代码

<template>
  <div class="app">
  <!--这里按钮内的语言是从配置中取得的login,下同-->
    <button>{
   
   { $t('login') }}</button>
    <!-- 点击切换可以切换语言 -->
    <button @click="change">{
   
   { $t('change') }}</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'app',
  methods: {
      
      
    change() {
      
      
    //这里可以访问到配置的locale,当main.js内通过vue.use注册过后就可以通过this.$i18n去访问到里面的locale,通过改变locale的值实现中英文切换
      console.log('this.$i18n.local', this.$i18n.locale);
      if (this.$i18n.locale == 'en') {
      
       //这里进行判断下
        this.$i18n.locale = 'zh'
      } else {
      
      
        this.$i18n.locale = 'en'
      }
    }
  }
}
</script>

<style scoped></style>

效果图