Vue 语言国际化

1、安装插件

npm install vue-i18n   //中英文

2、创建I18n实例
src/i18n/index.js
import VueI18n from ‘vue-i18n’;
import Vue from ‘vue’;
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale:localStorage.getItem("lang"),
    messages: {
        'zh-Cn': require('@/i18n/lang/zh-Cn'),   // 中文语言包
        'en': require('@/i18n/lang/en')    // 英文语言包
    },
});

export default  i18n;

3、在main.js 中引入插件

import i18n from '@/i18n';  //vue-i18n

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

})

4、定义语言文件 src/i18n/lang/
src/i18n/lang/zh-CN.js

module.exports = {
    system:{
      language:"汉语",
      name:"系统名称"
    }
  }

src/i18n/lang/en.js

module.exports = {
	system:{
		language:"English",
		name:"System Name"
	}
}

5、组件中使用按钮切换
【1】、直接使用-》{{$t(‘system.name’)}}

【2】、数据定义-》this.$t(“system.language”)

<template>
  <div class="hello">
    <el-button type="primary" @click="changeLang">切换中英文</el-button>
    <div style="color:#fff">
      <p>系统名称：{{$t('system.name')}}</p>
      <p>系统语言：{{datalang}}</p>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
  	datalang:this.$t("system.language")
  },
  methods:{
      changeLang() { 
          let locale = this.$i18n.locale === 'zh-Cn' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh-Cn' 
          // sessionStorage.setItem("lang",this.$i18n.locale);//储到会话
          localStorage.setItem("lang",this.$i18n.locale);//储到本地
          window.location.reload();
      },
  }
}
</script>

6、效果图