Vue + Element UI（五）：国际化实现

拼搏现实的明天。 2022-09-11 02:25 199阅读 0赞

### 文章目录 ###

*   *  国际化支持
     *   *  1、安装依赖
         *  2、添加配置
         *  3、字符引用
         *  4、切换菜单

--------------------

## 国际化支持 ##

### 1、安装依赖 ###

执行以下命令，安装 i18n 依赖。

npm install vue-i18n --save
    或者
    yarn add vue-i18n

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

### 2、添加配置 ###

（1）在 src 下新建 i18n 目录，并创建一个 index.js  
![在这里插入图片描述][e6fcc26c88f84b66a97b376604b6bb6b.png]  
**index.js**

import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n)
     
    // 注册i18n实例并引入语言文件，文件格式等下解析
    const i18n = new VueI18n({ 
      locale: 'zh_cn',
      messages: { 
        'zh_cn': require('@/assets/languages/zh_cn.json'),
        'en_us': require('@/assets/languages/en_us.json')
      }
    })
    
    export default i18n

（2）在assets目录下面创建多个多语言文件  
![在这里插入图片描述][38dc8346e34c4137aaa10aab721ce2cc.png]  
**zh.json**

{ 
        "common": { 
            "home": "首页",
            "login": "登录",
            "exit": "退出"
        },
        "sys": { 
            "userMng": "用户管理",
            "deptMng": "机构管理",
            "roleMng": "角色管理",
            "menuMng": "菜单管理",
            "logMng": "日志管理"
        }
    }

**es.json**

{ 
        "common": { 
            "home": "Home",
            "login": "Login",
            "exit": "Exit"
        },
        "sys": { 
            "userMng": "User Manage",
            "deptMng": "Dept Manage",
            "roleMng": "Role Manage",
            "menuMng": "Menu Manage",
            "logMng": "Log Manage"
        }
    }

（3）在 main.js 中引入 i18n 并注入到 vue 对象中。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_18_color_FFFFFF_t_70_g_se_x_16]

### 3、字符引用 ###

在原本使用字符串的地方，引入国际化字符串。

把原本的“用户管理”、“菜单管理”等字符串换成如下格式引入。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16]

### 4、切换菜单 ###

在用户信息前边添加一个用于语言切换的菜单，用于切换不同的语言。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

菜单语言切换的时候，修改国际化的设置  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

（4）启动测试  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
选择点击切换英文，导航菜单成功切换到英文。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/df7dc92eaa404e6689f62e3cc4f9ab07.png
[e6fcc26c88f84b66a97b376604b6bb6b.png]: /images/20220828/e3fcf61667674cd2a8fac4311705a047.png
[38dc8346e34c4137aaa10aab721ce2cc.png]: /images/20220828/612986ec89a94697b555effa13c3f2f4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/68c4d57ffc5f472eb9e74421e69a7b01.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/0fa831e3efb444e89110cf445fa702d7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/34b567f7a60542d68869478e9f675fe0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/812ef784c40f485b9ed77cce7d69d634.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/daf4ee79edf7463ab4f7d8ddb899bfdf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA57uP55CG77yM5aSp5Y-w6aOO5aW95aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/60373e5effab42bfa0ff9aae2d20cbef.png