vue中英文切换组件封装（vue-i18n超详细版）

写了好几次中英文切换，每次重新写都要去翻之前的项目代码来cv，提取出来记录一下

以下方向仅供参考。
官方文档：https://kazupon.github.io/vue-i18n/guide/formatting.html

一、下载vue-i18n

目前我用的版本终端输入：

npm install vue-i18n@8.28.2

关于版本环境兼容问题：终端不同版本vue-i18n可运行的node环境是有要求的

二、封装的组件代码”

模块文件i18n中,langs是切换的语言文件

en.js文件:

const English ={
//前面还有很多分模块的切换变量，如login模块下，有两个变量login、tip
.......

    login:{
        login:'Login',
        tip:'Please enter password'
    },

.....

}
export default English

zh.js文件:

const Chinese={
.......

    login:{
        login:'登录',
        tip:'请输入密码'
    },

.....

}
export default Chinese

i18n.js文件:

//引入部分
import Vue from 'vue'
import VueI18n from 'vue-i18n'
//引入element 自带的语言包
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
//引入自己创建的语言包
import enLocale from './langs/en'
import zhLocale from './langs/zh'

//注册i18n
Vue.use(VueI18n)
//设置i18n实例配置项
const i18n = new VueI18n({
  locale: window.sessionStorage.getItem('lang_IAP') || 'en', //默认语言
  messages:{
   //合并自己的语言包和element的语言包
    en: {
      ...enLocale,
      ...elementEnLocale
    },
    zh: {
      ...zhLocale,
      ...elementZhLocale
    }
  }
})
//暴露出去
export default i18n

封装切换中英文组件Language.vue：

<template>
  <el-dropdown class="lang-container hover-pointer" trigger="click">
    <span style="color: #f5f6f8;">{{ language }} <i class="el-icon-caret-bottom el-icon--right" />
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item @click.native="changeLangauge('zh')">
        <span style="display:block;">简体中文</span>
      </el-dropdown-item>
      <el-dropdown-item @click.native="changeLangauge('en')">
        <span style="display:block;">English</span>
      </el-dropdown-item>
     
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
    name: 'Language',
  data() {
    return {
      language: ''
    }
  },
  created() {
    this.showLangauge()
  },
  methods: {
    showLangauge() {
      //默认中文
      const currentLang = window.sessionStorage.getItem('lang_IAP') || 'en'
    // const currentLang='zh'
      switch (currentLang) {
        case 'zh':
          this.language = '简体中文'
          break
        case 'en':
          this.language = 'English'
          break
        
      }
    },
    changeLangauge(lang) {
      this.$i18n.locale = lang
      window.sessionStorage.setItem('lang_IAP', lang)
      window.location.reload()
    }
  }
}
</script>
<style lang="scss" scoped>

.hover-pointer {
  span {
    cursor: pointer
  }
}
</style>

main.js文件修改

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store/index';
import axios from 'axios';

//引入 i18n 
import i18n from './i18n/i18n'

//element官方方法 
//为了实现element插件的多语言切换
Vue.use(ElementUI,{
  i18n:(key,value) =>i18n.t(key,value)
})

Vue.prototype.$axios = axios;
Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,   //添加进vue实例中
  render: (h) => h(App),
}).$mount('#app');

三、组件使用

</template>
 <Language></Language>
</template>
 import Language from "../components/Language.vue";

四、代码中使用

不同类型中的使用方式
在html中：

//1、
<span class="text">{{$t("login.topTiTle")}}</span>

//2、
<el-form-item :label="$t('login.tip')+`:`" prop="password">
....
</el-form-item>

在data中：

  data() {
    return {
     ....
      rules: {
        password: [{ required: true, message: `${this.$t('login.tip')}`, trigger: 'blur' }],
      },
    };
  },

在函数中：

//1、
this.$message.error(`${this.$t('message.passwordErr')}`);


//2、
this.$message({
                message: `${this.$t('message.login_success')}`,
                type: 'success',
              });