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

什么是web页面国际化

web页面国际化页面国际化，就是可以让网页的文字信息，根据用户的选择，显示中文、英文、韩语、等等。
如下图举例：
第一张用户选择中文

第二用户选择韩语

前端应该如何实现国际化

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

1、下载vue-i18n

npm install vue-i18n

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，开始配置

代码：

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>

点击切换前，

点击切换后