element国际化

最新推荐文章于 2024-05-23 14:04:41 发布

勇敢小陈

最新推荐文章于 2024-05-23 14:04:41 发布

阅读量917

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/ct5211314/article/details/129732282

版权

该文章介绍了如何在Vue2项目中安装和配置vue-i18n实现国际化功能，包括创建lang文件夹，编写zh.js和en.js来定义翻译内容，以及在main.js中引入和挂载i18n实例。同时，提供了中英文切换的方法。

摘要由CSDN通过智能技术生成

一、安装vue-i18n

yarn add vue-i18n

Vue2的话需要安装低版本：

yarn add vue-i18n@6 -S

二、配置

新建lang文件夹，在文件夹内创建zh.js、en.js、index.js文件

zh.js文件说明：用于配置需要中英文转换的中文部分

export default{
    demonstrate:'演示'
}

en.js文件说明：用于配置需要中英文转换的英文部分

export default{
    demonstrate:'demonstrate'
}

index.js文件说明：用于设置国际化

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en' //导入element ui中的默认英文配置
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'//导入element ui中的默认中文配置
import zh from './zh'//导入我们在zh.js文件中的词条
import en from './en'//导入我们在en.js文件中的词条
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
    ...en//把导入的英文词条合并
  },
  zh: {
    ...zhLocale,
    ...zh//把导入的中文词条合并
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'zh', // set locale   //注意local 的value是啥就是啥语言 en为英语，zh为中文
  messages, // set locale messages
})
export default i18n  //最后导出i18n

在main.js文件中引入并挂载到Vue实例上去

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



Vue.config.productionTip = false
Vue.use(ElementUI,{
  i18n:(key,value)=>i18n.t(key,value)
})

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')

三、切换中英文展示

<template>
  <div>
    <button @click="changLang">切换中英文</button>
    <el-button>{{ $t('demonstrate') }}</el-button>
  </div>
</template>

<script>
export default {
methods:{
  changLang(){
    this.$i18n.locale= this.$i18n.locale=='zh'? this.$i18n.locale='en': this.$i18n.locale='zh'
  }
}
}
</script>

<style>

</style>