详见:前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法_Dream_xun的专栏-CSDN博客_this.$t()

国际化 i18n 方案,$t 是 vue-i18n 提供的全局方法,

在组件里使用 {{ $t ("xxx") }} ,可以看到 search 译为 查询

<el-button class="filter-item" size="small" type="primary" v-waves @click="searchList">
                        {{$t("btn.search")}}
</el-button>

                                                                

xxx的来源:目录树—— scr / i18n / zh.js / zh

const zh = {
    btn: {
        search: '查询',
    }
}

 配置了英文和中文两种语言,上文链接中的示例:

import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) // 通过插件的形式挂载
 
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./common/lang/zh'),   // 中文语言包
      'en-US': require('./common/lang/en')    // 英文语言包
    }
})
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

Logo

前往低代码交流专区

更多推荐