vue+element-ui 多语言

最新推荐文章于 2024-07-03 12:01:14 发布

今天你码了吗

最新推荐文章于 2024-07-03 12:01:14 发布

阅读量617

点赞数

分类专栏： vue 文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/weixin_50249353/article/details/128101918

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用程序中实现多语言支持，包括使用vue-i18n包，设置饿了么UI组件的语言，以及通过Cookie读取用户语言偏好。步骤包括创建实例化文件，配置语言包，设置Element UI语言，并提供了三种调用翻译的方法。同时，展示了在模板中如何创建一个下拉菜单进行语言切换，并在切换时更新语言环境。

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

多语言

1.下载国际化的包
npm i vue-i18n
2. 一个多余语言的实例化文件 ‘src/lang/index.js’

import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的包
import Cookie from 'js-cookie' // 引入cookie包
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN // 将饿了么的英文语言包引入
    },
    zh: {
      ...elementZH // 将饿了么的中文语言包引入
    }
  }
})

3.在main.js中对挂载 i18n的插件，并设置element为当前的语言

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

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

这里是为了中英文切换的时候 element自带组件中文字的中英文切换所以要添加设置element 的语言

第四步，在index.js中同样引入该语言包

import customZH from './zh' // 引入自定义中文包
import customEN from './en' // 引入自定义英文包
Vue.use(VueI18n) // 全局注册国际化包
export default new VueI18n({
  locale: Cookie.get('language') || 'zh', // 从cookie中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...elementEN, // 将饿了么的英文语言包引入
      ...customEN
    },
    zh: {
      ...elementZH, // 将饿了么的中文语言包引入
      ...customZH
    }
  }
})

调用的时候一共3种方式

$t(‘language’) 这种是绑定属性的时候用
this.$t(‘language’) 这种可以放在双大括号或者方法里面用
i18n.t(‘language’) 这种可以用在js 文件种但是需要引入i18n

import {i18n} from '/src/lang/index.js'

也就是第二步的文件’/src/lang/index.js’

最后调用的时候只要传进去对应的lang类型就可以了可以保存在cookie中

<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 这里必须加一个div -->
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  methods: {
    changeLanguage(lang) {
      Cookie.set('language', lang) // 切换多语言
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message.success('切换多语言成功')
    }
  }
}
</script>