vuecli3有关i18n中英文切换问题

1、npm安装

 npm install vue-i18n

2、main.js配置

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

//有关i18n
const i18n = new VueI18n({
  locale: 'zh',//表示默认的语言 修改全局locale值可以导入message中不同的包
  messages: {
    'zh': require('./lang/zh'), // 中文语言包
    'en': require('./lang/en'), // 英文语言包
  }
})

new Vue({
  ……
  i18n,//注意这里需要引入上面定义的i18n变量挂载到#app上
  render: h => h(App)
}).$mount('#app')

3、中英文包的文件夹(vuecli3)

main.js同级创建一个lang的文件夹，lang文件夹里包含zh.js en.js 分别存放中英文的内容

zh.js中内容

export const m = {

  //导航
  index:'首页',//首页
  study_show:'研究展示',//研究展示
  fruit_show:'成果展示',//成果展示
  info1:'组内资讯',//组内资讯
  people:'团队成员',//团队成员
  wall:'展示墙',//展示墙
  envir:'实验环境',//实验环境
}

en.js中内容

export const m = { 
  // 导航
  index:'HOME',//首页
  study_show:'RESEARCH',//研究展示
  fruit_show:'PUBLICATIONS',//成果展示
  info1:'info',//组内资讯
  people:'MEMBERS',//团队成员
  wall:'FACILITIES',//展示墙
  envir:'ENVIRONMENT',//实验环境
}

4、vue中模板渲染

{{$t(‘m.index’)}} m表示语言包里输出对象的总体变量名，一定要两个语言包里都设置一样的变量名（例如m）

//vue中使用
<router-link to="/index" class="nav_font">{{$t('m.index')}}</router-link>

5、切换

<template>
  <div id="nav">
    <div class="translate">
      <div class="lefttrai">
      </div>
      <div class="midtrai">
        <span class="span_left" >选择语言：</span>
        <span class="span_mid" :class="{lang_active:this.$i18n.locale=='zh'}" @click="changelang('zh')">中文</span>
        <span class="span_right" :class="{lang_active:this.$i18n.locale=='en'}" @click="changelang('en')">English</span>
      </div>
  </div>
</template>
<script>
export default {
  methods:{
    changelang(lang){
      if(lang=='zh'){
        this.$i18n.locale='zh',
          alert("切换中文成功！");
      }
      else{
        this.$i18n.locale='en',
          alert("English switch successful！");        
      }
    }
  }
}
</script>

这样只要是写入{{$t(‘m.某某某’)}}里的地方(某某某为语言包对象里具体的变量名称）

通过切换中英文的按钮就可以实现导入不同的语言包然后显示中英文切换的样式了。

PS：如果是一些前端写死的导航啊或者是通常不变的名称则可以这样使用i18n来切换中英文实现国际化，但如果是后端传入的文章或者是其他数据需要中英文切换，则无法实现。