vue中英文切换i18n_vue3后台管理项目中实现中英文切换

1. 下载il8n插件

cnpm i il8n -S

2. 全局引入il8n

import i18n from './i18n/i18n'
 
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: c => c(App)
})

3. il8n.js内容

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)//从localStorage获取语言选择。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    //默认 cn 中文 
    messages,
})
locale.i18n((key, value) => i18n.t(key, value))
    //兼容element
 export default i18n

4. cn.js和en.js文件结构属性名要一一对应

================cn.js====
export default {
  basic: {
    welcome:'欢迎',
    guide: '有关如何配置/自定义此项目的指南和方法，请查看vue-cli文档。'
  }
}
==========en.js=========
export default {
  basic: {
    welcome:'Welcome',
    guide: 'For a guide and recipes on how to configure / customize this project,check out the vue-cli documentation.'
  }
}

5. 使用通过下拉菜单实现切换

<el-select v-model="selectValue" @change="langChange" placeholder="请选择语言" class="lang">
              <el-option
                v-for="item in langtrigger"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>

//data数据，默认是cn
  selectValue:'cn',
langtrigger: [
        { value: 'cn', label: '中文' },
        { value: 'en', label: 'English' }
      ],
//methods中的change事件
  langChange (e) {
      localStorage.setItem('lang', e)
      this.$i18n.locale = e
      this.langtrigger = e
    },

6. 使用en.js和en.js的属性值 $t()固定写法就可以实现了

 <div>欢迎</div> //原来的写法，写死 
 <div>{{ $t("basic.welcome") }}</div>//现在可以中英文切换

记录一个面包屑导航的中英文切换，

1. 首先在router中给每个路由设置中英文版本，例如：

 {
       name: [['Project', 'Create']],
       path: '/project/config/add',
       component: () => import('../pages/project/addproject.vue'),
       meta: ['项目管理', '新建项目']
},

2. 其次在面包屑导航中跳转获取

 <el-breadcrumb separator="/" style="font-size: 14px" class="bread">
              <!-- <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item> -->
              <el-breadcrumb-item
                v-for="(item) in selectValue=='cn'?$route.meta:$route.name[0]"
                :key="item"
                :to="$route.path"
              >
                <a href="#">{{item}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>

selectValue这个值是上面根据下拉菜单的双向绑定后选择中英文切换。点击下拉选择后

效果如下：

如果是在el-table的内容也想实现中英文的话（固定的写法，不用后台传输的数据实现）

思路：通过后台传入的值判断当前行的某一列是什么值，值为il8n的自己编辑好的值。这样在实现中英切换的时候就能动态显示了

this.tabledata=[]
res.data.forEach(item=>{
var obj={}
    if(item.cc==1){
    obj.date=this.$t(en.js文件的属性)
}
this.tabledata.pus(obj)
})

7. 侧边导航中英文切换

1. 在语言包里面定义好侧边导航

2. 在路由里单独导入封装好的语言包

3. 路由中使用title:`${i18n.t("common.quanbu")}`

import i18n from "@/utils/i18n/index";
 
 {path: '/about',meta:{title:`${i18n.t("common.quanbu")}`,icon:'el-icon-present',level:1,roles:['super','normal']},component: About,children:[
    {path:"",component: () => import("../views/vue-calendar.vue")}
  ]},

4. 效果如下，测试已成功

8. 不刷新页面实现中英文切换

<div class="right_lang">
      <!---中英文切换-->
      <i
        v-show="selectValue=='cn'"
        class="font_family el-icon-s-flag en-click-css"
        @click="langChange('en')"
      />
      <i
        v-show="selectValue=='en'"
        class="font_family el-icon-s-promotion e en-click-css"
        @click="langChange('cn')"
      />
    </div>
 
//data数据
 selectValue: 'cn',
//methods数据
// 不刷新页面中英文切换
    langChange (e) {
      console.log(e)
      this.selectValue = e
      this.$local.set('lang', e)
      this.$i18n.locale = e
      this.LangChange = e
      var oriSetItem = this.$local.set
      this.$local.set = function (key, value) {
        // 这里抛出自定义事件
        var event = new Event('setLangEvent')
        event.new_lang = value
        window.dispatchEvent(event)
        // 实现原方法
        oriSetItem.apply(this, arguments)
      }
    }

文章到此结束，希望对你有所帮助~