vue-i18n 网站中英文切换插件的基本使用

最近项目中用到国际化之前看到一个博客写的vue-i18n的使用非常好，后来就找不到是哪个了心塞。
vue-i18n的基本使用
首先肯定是下载啦！

npm install vue-i18n --save

然后在src下边新建一个i8n文件夹

//cn.js



// import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
const cn = {
     
  header: {
     
    headerTop: {
     
      'text': '你好',
    }

  }
  // ...zhLocale
}

export default cn

//en.js


// import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
const en = {
     
  header: {
     
    headerTop: {
     
      'text': 'Hellow',
    
    }
  }
  // ...enLocale
}

export default en

//index.js


import en from './en'
import cn from './cn'
export default {
     
  en: en,
  cn: cn
}

//i8n.js

import Vue from 'vue'
// import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
// 从localStorage获取语言选择。
const i18n = new VueI18n({
     
  locale: localStorage.lang || 'cn', // 初始未选择默认 cn 中文
  messages
})
// locale.i18n((key, value) => i18n.t(key, value)) // 兼容element

export default i18n

然后再main.js中引入

//main.js

import i18n from './i18n/i18n'      //先引入

new Vue({
     
  el: '#app',
  router,
  i18n,             //在这个地方注册
  components: {
     
    App
  },
  template: ''
})

接下来是页面部分

<template>
  <div>
    <div>{
    {$t('header.headerTop.text')}}div>
    <button @click="langChange('cn')">中文button>
    <button @click="langChange('en')">英文button>
  div>
template>

<script>
export default {
      
  data () {
      
    return {
       }
  },
  created () {
      
    let that = this
    console.log(localStorage.lang)
    that.selectValue = localStorage.lang === undefined ? 'cn' : localStorage.lang
  },
  methods: {
      
    // 语言切换
    langChange (e) {
      
      // console.log(e)
      localStorage.setItem('lang', e)
      this.$i18n.locale = e
    }
  }
}
script>

<style lang='scss'>
style>

效果图

这个是静态页面翻译，我一直想找怎样从后台获取到的数据进行中英文切换，希望大佬可以指点一下，万分感谢！