第一步

执行 npm install vue-i18n --save，安装 i18n

第二步

在项目 src 目录下创建 i18n 目录，创建 index.js 文件 、en.json 和 zh-Hans.json 两个配置语言 json 文件，结构如下：

-- src
|-- i18n
   |-- index.js
   |-- en.json
   |-- zh-Hans.json
   |-- ...json(其他语言文件)

这里只简单地配置 en(英语) 和 zh-Hans(中文) 两个语言，后期想配置其他的语言，创建语言文件 xx.json 后直接放入 i18n这个目录中就行

index.js 文件：

// 引入 vue
import Vue from 'vue';

// 引入  vue-i18n
import VueI18n from 'vue-i18n'

// 注册  vue-i18n
Vue.use(VueI18n)

// 利用 webpack 的 require.context 方法遍历读取 i18n 目录下的所有 .json 语言文件
// 这样做省去了逐一引入语言文件的工作量，只需要将创建的语言文件 xx.json 直接放入 i18n这个目录中就行
function loadLocaleMessages() {
   const locales = require.context('.', true, /.json$/i)
   const messages = { };
   locales.keys().forEach(key => {
      messages[key.replace('./', '').replace('.json', '')] = locales(key);
   });
  // 返回语言配置对象
   return messages;
}

// 初始化语言配置
const i18nConfig = {
    locale: 'en',
    messages:loadLocaleMessages()
}

// 创建 vue-i18n 实例
const i18n = new VueI18n(i18nConfig)

// 导出实例
export default i18n;

en.json 文件

{
   "index.title": "Hello i18n",
   "index.home": "Home",
   ...
}

zh-Hans.json 文件

{  
   "index.title": "你好 i18n",
   "index.home": "首页",
   ...
}

第三步

在 main.js 文件中引入 i18n

 import i18n from './src/i18n';
const app = new Vue({
    i18n,
    ...App
})

到这里就可以进行使用 i18n 了(所谓的国际化是针对于自身定义的字段属性进行语言切换，达到国际化，并不意味着整个应用都国际化，如：后端返回的动态文章内容，是无法进行语言转化的，返回的是什么语言就是展示什么语言)。

第四步

如何在页面中使用并进行切换语言，在 App.vue 或 自己创建的 xx.vue 文件中加入以下代码，这里以 App.vue 为例。
App.vue

<template>
   <div>
      <div>标题：{{$t('index.title')}}</div>
      <div @click="setLang('en')">切换英语</div>
       <div @click="setLang('zh-Hans')">切换中文</div>
   <./div>
</template>
<script>
   export default {
       .....
       methods: {
          // 点击切换语言
           setLang(value){
                this.$i18n.locale = value;
           }
       }
   }
</script>