1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架 demo ，有助于你快速的进行 vue 模块化开发。
2、我们需要安装 vue-i18n, 推荐 npm 包依赖：
$ npm install vue-i18n
当然你也可以这样：

3、注入 vue 实例中，项目中实现调用 api 和 模板语法
这边我是顺着使用 npm 安装依赖进行。先在 main.js 中引入 vue-i18n。

  1. import VueI18n from 'vue-i18n'
  2. Vue.use(VueI18n)
  3. const i18n = new VueI18n({
  4.     locale: 'zh-CN',    // 语言标识
  5.     //this.$i18n.locale // 通过切换locale的值来实现语言切换
  6.     messages: {
  7.       'zh-CN': require('./common/lang/zh'),   // 中文语言包
  8.       'en-US': require('./common/lang/en')    // 英文语言包
  9.     }
  10. })
  11. new Vue({
  12.   i18n
  13. })

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

  1. /**
  2.  * 切换语言 
  3.  */ 
  4.  changeLangEvent() {
  5.    this.$confirm('确定切换语言吗?', '提示', {
  6.        confirmButtonText: '确定',
  7.        cancelButtonText: '取消',
  8.        type: 'warning'
  9.     }).then(() => {
  10.        if ( this.lang === 'zh-CN' ) {
  11.           this.lang = 'en-US';
  12.           this.$i18n.locale = this.lang;//关键语句
  13.        }else {
  14.           this.lang = 'zh-CN';
  15.           this.$i18n.locale = this.lang;//关键语句
  16.        }
  17.     }).catch(() => {
  18.        this.$message({
  19.            type: 'info',
  20.        });          
  21.     });
  22. }

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


{{$t(‘m.music’)}}