国际化多语言(i18n)

H____16

已于 2022-06-16 22:55:53 修改

阅读量231

点赞数

文章标签： vue.js elementui javascript

于 2022-06-16 17:39:27 首次发布

本文链接：https://blog.csdn.net/H____16/article/details/125320268

版权

本文介绍了如何在Vue.js项目中实现国际化，包括使用ElementUI的内置多语言配置，自定义不依赖ElementUI的多语言设置，以及如何封装组件实现动态切换语言。详细步骤包括安装vue-i18n包，创建并挂载i18n插件，通过$t方法在模板中使用多语言内容，以及创建和使用语言切换组件。

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

1.安装包---注意版本兼容

npm i vue-i18n@8.22.2

ElementUI多语言配置(自带的)

1.创建src/lang/index.js

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

2.在main.js中挂载 i18n的插件