vue国际化的处理- i18n

下载

yarn add vue-i18n

安装

"vue-i18n": "^8.11.2"

使用lang/index.ts

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n);

const i18n = new VueI18n({
    
    
  locale:'zh',
  messages:{
    
    
    en:{
    
    
      loginText:"login",
      switchText:"change"
    },
    zh:{
    
    
      loginText:"登录",
      switchText:"切换"
    }

  }
})

export default i18n;

添加：

import i18n from "@/common/lang"

Vue.use(ElementUI, {
    
    // element-ui 为了兼容[email protected]
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

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

export default app

体现$t("loginText")

<el-button type="success" @click="fun">语言切换</el-button>
<el-button type="danger">{
   
   { $t("loginText")  }}</el-button>