vue-i18n结合Element-ui的配置

孙淑建发布于2019-08-26 13:51 / 1012人阅读

摘要：官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下为了实现插件的多语言切换按照如上把国际化文件都整合到一起，避免中大段引入相关代码。

使用方法： 在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字 关于第一个问题，可以在初始化VueI18n实例时，通过 localStorage 来为 locale 对象赋值

在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值
const i18n = new VueI18n({ locale: localStorage.getItem("locale") || "zh", messages })

关于第二个问题，更改Element 组件内部语言，这里还涉及到手动处理 vue-i18n@6.x 兼容性问题。 http://element-cn.eleme.io/#/... 官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下 ###i18n.js import Vue from "vue" import VueI18n from "vue-i18n" import locale from "element-ui/lib/locale"; import zh from "./langs/zh" import en from "./langs/en" import enLocale from "element-ui/lib/locale/lang/en" import zhLocale from "element-ui/lib/locale/lang/zh-CN"

Vue.use(VueI18n)

const messages = { en: Object.assign(en, enLocale), zh: Object.assign(zh, zhLocale) }

console.log(messages.zh)

const i18n = new VueI18n({ locale: localStorage.getItem("locale") || "zh", messages })

locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

按照如上把国际化文件都整合到一起，避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码 ###main.js import i18n from "./i18n/i18n" // 1行

window.app = new Vue({ el: "#app", router, store, i18n, // 2行 components: { App }, template: "" })

---------------------------源码如下--------------------------------------

// 工程本地国际化
import locale_zh_CN from "./lang/zh-CN"
import locale_zh_TW from "./lang/zh-TW"
import locale_en_US from "./lang/en-US"
import locale_ko_KR from "./lang/ko-KR"

// ElementUI 国际化
import element_locale from "element-ui/lib/locale"
import element_zh_CN from "element-ui/lib/locale/lang/zh-CN"
import element_zh_TW from "element-ui/lib/locale/lang/zh-TW"
import element_en_US from "element-ui/lib/locale/lang/en"
import element_ko_KR from "element-ui/lib/locale/lang/ko"

import Vue from "vue"
import VueI18n from "vue-i18n"
Vue.use(VueI18n)

// 将各自的国际化文件合并抛出 (后期公共组件等插件的国际化文件也需要考虑)
const messages = {

zh_CN: Object.assign(locale_zh_CN, element_zh_CN),
zh_TW: Object.assign(locale_zh_TW, element_zh_TW),
en_US: Object.assign(locale_en_US, element_en_US),
ko_KR: Object.assign(locale_ko_KR, element_ko_KR)

}

// i18n插件默认给中文
const i18n = new VueI18n({

locale: window.localStorage.getItem("WEBFRONT_LANG") || "zh_CN",
messages

})

// 为了实现element插件的多语言切换
element_locale.i18n((key, value) => i18n.t(key, value))

export default i18n

GPU云服务器云服务器 vue-i18n nginx18 php和js的结合 element-ui

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109672.html

Vue国际化处理 vue-i18n 以及项目自动切换中英文

摘要：直接上预览链接国际化处理以及项目自动切换中英文环境搭建命令进入项目目录，执行以下命令安装国际化插件项目增加国际化翻译文件在项目的下添加文件夹增加中文翻译文件以及英文翻译文件，里面分别存储项目中需要翻译的信息。 0. 直接上预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n...

wangtdgoodluck 2019-08-26 11:51 评论0 收藏0
vue-i18n和elementUI实现国际化

摘要：为了满足很多公司都已经向方向发展顾使用多语言的网站已经太普遍了所以是使用和实现国际化接下来我会尽量写的详细一点的内容个人觉得的应该写得清楚一些安装所需要用到的东西安装安装创建目录编写所需要用到的语言我只写了中文和英文欢迎来到我为了满足很多公司都已经向international方向发展,顾使用多语言的网站已经太普遍了, 所以是使用vue-i18n和elementUI实现国际化.接下来我...

_ang 2019-08-22 18:14 评论0 收藏0
记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
vue，使用vue-i18n实现国际化

摘要：需求公司项目需要国际化，点击按钮切换中文英文安装注入实例中，项目中实现调用和模板语法语言标识通过切换的值来实现语言切换中文语言包英文语言包最后对应语言包中文语言包首页概览公司概述财务报表更多附录主要财务指标对比分析新闻事件档案需求公司项目需要国际化，点击按钮切换中文/英文 1、安装 npm install vue-i18n --save 2、注入 vue 实例中，项目中实现调用 ...

jsummer 2019-08-22 16:05 评论0 收藏0
基于Vue、vue-i18n实现国际化（多语言）

摘要：在中引入调用第三方插件新建一个对象默认语言配置语言选项是一个配置语言包文件和语言选项的文件，文件内容大致如下语言包列表合并语言包是一个函数，判断当前设置的语言类型，如果没有设置语言，则根据判断是中文还是非中文，非中文则显示英语。 vue-i18n官网 https://kazupon.github.io/vue... 项目用vue-cli构建，用到vue全家桶及webpack、iview...

smallStone 2019-08-23 14:30 评论0 收藏0