Vue 中英文切换(vue-i18n)结合elementUI

项目中需要用到中英文切换，这里用到vue-i18n插件，配合localStorage使用

第一步：下载包 vue-i18n

npm install --save vue-i18n

第二步：在main.js中引入 vue-i18n包

import VueI18n from "vue-i18n";
Vue.use(VueI18n)

// Create VueI18n instance with options
const i18n = new VueI18n({
          
   
  locale: localStorage.getItem(locale) || cn, // 语言标识
  messages:  {
          
   
	  en: {
          
   
	    message: hello,
	    ...enLocale
	  },
	  cn: {
          
   
	    message: 你好,
	    ...zhLocale
	  }
}, // set locale messages  语言包
  silentTranslationWarn: true
})

Vue.use(Element, {
          
   
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
          
   
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount(#app)

第三步：在i18n文件夹的en.js/zh-CN.js文件中配置中英文

第四步：在.vue文件中使用 vue-i18n，$t(title)

<span class="pageTitle">{
         
  {$t($route.meta.title)}}</span>
<span class="pageTitle">{
         
  {$t(title)}}</span>

第五步： 语言切换 方法

/** 语言切换*/
 toggleLang(lang) {
          
   
   localStorage.setItem(locale, lang)  // 设置 localStorage
   this.$i18n.locale = localStorage.getItem(locale)  // 设置 locale
 },

第六步： 使用watch监听当前语言 this.$i18n.locale

当前语言类型变化时，重新请求接口

watch: {
          
   
    $i18n.locale(newType) {
          
   
        this.getList(newType)
    }
},