在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统---(二)vue-i18n中

文章目次

• 前言
  
• 一、vue-i18n是什么？
  
• 二、使用步调
  
• 
  
  
  
  • 1.安装vue-i18n
    
  • 2.添加当地翻译信息
    
  • 3.创建带有选项的i18n对象和设置默认语言标识
    
  • 4.将i18n对象挂载到Vue实例
    
  • 4.处理公共头部的语言切换事件
    
  • 5.在html模板中使用
    
  • 6.最终效果
    
    
  
• 总结
  

  提示：以下是本篇文章正文内容，下面案例可供参考
一、vue-i18n是什么？

一款针对Vue.js 的国际化插件。把网站的所有需要中英转换的数据设置成中英文json文件，需要编写大量中英文对照表，适合于少量的固定翻译。
二、使用步调

1.安装vue-i18n

npm安装下令

1. npm install vue-i18n

复制代码

安装乐成如图（示例）：

2.添加当地翻译信息

当地翻译信息有两个，zh.js中文和en.js英文，这两个js的内容是一一对照的。
在src文件夹下创建lang文件夹，并添加两个zh.js和en.js文件。
如下图所示：

  en.js—英文
zh.js—中文
index.js----处理默认语言与导出i18n对象，方便在main.js中use

en.js代码如下（示例）：

1. 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;

复制代码

注意：

1. 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代码如下（示例）：

1. 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代码如下（示例）：

1.                   [img]https://www.jianchenwangluo.com/../../public/img/logo.png[/img]   
2.                                           
3.                                             
4.                                     {{$t("welcome")}}： {{user}}                                个人中心            账号设置            螺蛳粉            双皮奶            蚵仔煎                        
5.                                     
6.    
7.   
8. .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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！