ant desing 加 Vue-il18n 实现中英文切换（完全实现 还得后端配合）

业务逻辑 

运用Vue-il18n 主要来切换页面上固定字符  

ant desing 自带切换中英文的组建套在项目最外层即可（传递属性控制）

后台配合  主要是接口返回的字符串什么的 也得为英文（在请求头中添加页面当前语言状态）

引入Vue-il18n

yarn add vue-i18n

main.js

//引入
import VueI18n from 'vue-i18n'
//注册
Vue.use(VueI18n)
//判断本地是否存储有中英文 状态  
if(localStorage.getItem("pro__language") != null){
}else{
//没有就添加 默认为中文  加本地储存的意义是 为了下一次用户进入该页面能够记住是中文还是英文 方便用户使用
  localStorage.setItem('pro__language',JSON.stringify({lang:'zh'}))
}
const i18n = new VueI18n({
//读取本地储存的 状态
  locale: JSON.parse(localStorage.getItem('pro__language')).lang,
  messages: {
//将本地中英文翻译为两个文件（一个中文 一个英文）用于切换 多语言也可
    'en': require('./lang/en'),
    'zh': require('./lang/zh'),
  }
})

//挂载
new Vue({
    i18n,
}).$mount('#app')

翻译字符串文件格式（就是简单的导出一个对象）

中文  zh.js

export const l = {
  language:'English',
  all:'全部',
}

英文 en.js

export const l = {
  language:'中文',
  all:'all',
}

模板替换  和一般的变量差不多（大概三种用法）

    模板字符串

<span style="cursor: pointer;"  @click="changelang">
      {{ $t('l.language') }}
    </span>

    属性变量

<a-input :placeholder="$t('l.PleaseEnter')+' '+$t('l.ChineseDescription')"></a-input>

   js变量

title: this.$t('l.edition'),

实现切换的功能 

changelang(){
    // 强制刷新页面
    window.location.reload(true)
    // 切换模板
    if(this.$i18n.locale == 'zh'){
//如果点击切换时为中文就将本地储存的标识改为英文  i18n.locale的值也改为英文  反之亦然
         window.localStorage.setItem('pro__language',JSON.stringify({lang:'en'}))
          this.$i18n.locale = 'en'
        }else{
          window.localStorage.setItem('pro__language',JSON.stringify({lang:'zh'}))
          this.$i18n.locale = 'zh'
        }
      },

到这就能实现基本的字符串切换

但是如果你有用到组建库什么的组件库的 字符该怎么替换  这是就要用到组件库为我们准备的切换组件了

anr 有提供  其他组件库我还不清楚（菜鸡一枚）

我们在 App.vue中用    <a-locale-provider></a-locale-provider>  标签将   <router-view/>包裹起来

<template>
  <a-locale-provider :locale="locale">
    <div id="app">
      <router-view/>
    </div>
  </a-locale-provider>
</template>

 locale属性泽由 

computed计算出来

    computed:{
      // ant desing VUE ui库的中英文切换
      locale(){
        if(this.$i18n.locale == 'zh'){
          return zhCN
        }else if(this.$i18n.locale = 'en'){
          return enUS
        }
      }
    },

还有就是接口返回字符串问题

这个就要和后台小伙伴商量了