文章目次
提示:以下是本篇文章正文内容,下面案例可供参考
一、vue-i18n是什么?
一款针对Vue.js 的国际化插件。把网站的所有需要中英转换的数据设置成中英文json文件,需要编写大量中英文对照表,适合于少量的固定翻译。
二、使用步调
1.安装vue-i18n
npm安装下令
安装乐成如图(示例):
2.添加当地翻译信息
当地翻译信息有两个,zh.js中文和en.js英文,这两个js的内容是一一对照的。
在src文件夹下创建lang文件夹,并添加两个zh.js和en.js文件。
如下图所示:
en.js—英文
zh.js—中文
index.js----处理默认语言与导出i18n对象,方便在main.js中use
en.js代码如下(示例):
- import enLocale from 'element-ui/lib/locale/lang/en'const en = { //全局设置 add : 'add', welcome : 'welcome', //局部 status : { disabled : 'disabled', //不可用 abled : 'abled' //可用 }, //elementUI ...enLocale}export default en;
复制代码 注意:- import zhLocale from 'element-ui/lib/locale/lang/zh-CN'import enLocale from 'element-ui/lib/locale/lang/en'
复制代码 这是elementUI组件国际化。elementUI组件如何使用国际化中英文切换?
因为创建vue-i18n插件对象时,要传入须要的选项,如locale语言标识,messages中英翻译信息 index.js的功能主要是设置默认语言标识和use到Vue对象,创建vue-i18n对象,并导出这个它,然后在main.js中挂载到vue实例对象。 index.js代码如下(示例):
- import Vue from 'vue'import VueI18n from 'vue-i18n'import en from './en.js'import zh from './zh.js'Vue.use(VueI18n)const messages = { en:en, zh:zh}export function getLanguage(){ const chooseLanguage = window.localStorage.getItem("language"); if(chooseLanguage) return chooseLanguage //如果没有选择语言,默认为zh const language = (navigator.language || navigator.browserLanguage).toLowerCase(); const locales = Object.keys(messages); for(const locale of locales){ if(language.indexOf(locale) > -1){ console.log("locale===",locale) return locale; } } return 'zh'}const i18n = new VueI18n({ locale: getLanguage(), messages})export default i18n
复制代码 4.处理公共头部的语言切换事件
我们的头部,如图:
头部传送门
TheHeader.vue代码如下(示例):
- [img]https://www.jianchenwangluo.com/../../public/img/logo.png[/img]
-
-
- {{$t("welcome")}}: {{user}} 个人中心 账号设置 螺蛳粉 双皮奶 蚵仔煎
-
-
-
- .header{ background-color: #242f42; position: relative; width: 100%; height: 70px;}.logo{ width: 70px; height: 70px; float: left; margin-left: 30px;}.header-right{ float: right; width: 300px; height: 70px; display: flex; justify-content: space-around; align-items: center;}.iconfont{ color: white; font-size: 22px;}.logo img{ width:auto; height:auto; max-width:100%; max-height:100%;}.btn-changelan>span{ color: white; font-size: 18px;}.w-text{ font-size: 14px; color: white;}.el-dropdown-link { cursor: pointer; color: white; } .el-icon-arrow-down { font-size: 12px;}
复制代码 6.最终效果
英文:
中文:
总结
以上就是本日要讲的内容,本文仅仅简单先容了vue+elementUI+vue-i18n的使用。
来源:https://blog.csdn.net/qq_36818931/article/details/111941832
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |