web页面国际化，web页面中英文切换，vue项目国际化----------vue-i18n详细用法。

╰半夏微凉° 2022-12-15 11:24 452阅读 0赞

# 什么是web页面国际化 #

web页面国际化页面国际化，就是可以让网页的文字信息，根据用户的选择，显示中文、英文、韩语、等等。  
如下图举例：  
第一张用户选择中文  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
第二用户选择韩语![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

# 前端应该如何实现国际化 #

思路：如上面举的例子，用户点击选自不同的语言，页面就会展示对应的语言文字，类似与翻译功能；首先我们编写我们国际化配置文件，配置文件中是页面需要显示的文字信息，通过用户的选择页面展示不同的配置文件。

**1、下载vue-i18n**

npm install vue-i18n

**2、配置国际化文件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
**zh.js中的配置如下**

export const m = {
        music: '网易云音乐',
        findMusic: '发现音乐',
        myMusic: '我的音乐',
        friend: '朋友',
        musician: '音乐人',
        download: '下载客户端'
      }

**en.js中的配置如下**

export const m = { 
        music: 'Music',//网易云音乐
        findMusic: 'FIND MUSIC',//发现音乐
        myMusic: 'MY MUSIC',//我的音乐
        friend: 'FRIEND',//朋友
        musician: 'MUSICIAN',//音乐人
        download: 'DOWNLOAD'//下载客户端
      }

**3、在全局min.js中引入vue-i18n，开始配置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
代码：

Vue.use(VueI18n) // 通过插件的形式挂载
     
    const i18n = new VueI18n({
        locale: 'zh-CN',    // 语言标识
        //this.$i18n.locale // 通过切换locale的值来实现语言切换
        messages: {
          'Chinese': require('./common/lang/zh'),   // 中文语言包
          'English': require('./common/lang/en')    // 英文语言包
        },
        //隐藏警告
        silentTranslationWarn: true
    })

**4、在页面展示配置文件的信息，this.$i18n.locale 来进行语言的切换**

this.$i18n.locale="English""展示一英文
    this.$i18n.locale="Chinese"展示中文

vue-i18n 数据渲染的模板语法

<div>{
       {$t('m.music')}}</div>
    或者用循环也一样
    <ul v-for="(v,i) in $t('m')" :key="i">
               <li>{
       {v}}</li>
           </ul>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]  
点击切换前，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]  
点击切换后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c805a58e23bc4f13a7071a5a5adee95b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ebbeb37c87924cf99358f24953c69e2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/cccc3c263f094184abd7899629d523e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0bf800ca82e74fca8fc58253073d8a51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/d760d9f7762a491d84a59abfba759926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/c07dc909f2d244f69269cba7237adbf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/609151e92e814468b862cb374636614e.png