vue实现网页中英文切换

前言：最近一个项目有英文版数据以及中文版数据，我就想将之做成两个语言版本的网页。

vue使用vue-i18n插件实现网页中英文切换

1：下载vue-i18n插件

npm install vue-i18n

---

2：自己定义中英文两套js文件

中文版js文件：

英文版js文件：

---

3：配置main.js文件

//引入中英文切换插件vue-i18n
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 挂载

const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  messages: {
    'zh-CN': require('./lang/zh'),   // 通过require引入中文语言包
    'en-US': require('./lang/en')    // 通过require引入英文语言包
  }
})

new Vue({
  el: '#app',
  render:h=>h(App),
  router,
  store,
  i18n,  // ！！！！！一定要引入
})

---

4：通过点击事件切换语种

this.$i18n.locale = 'zh-CN'			//切换为中文
this.$i18n.locale = 'en-US'			//切换为英文

---

5：数据渲染

使用方式一：

<h3 class="myHotelList-bigTtitle">{{$t('m.hotelList')}}：</h3>

使用方式二：

<el-table-column
 :label="$t('m.isOfficialRating')"	//！！！！
 min-width="120"
 :formatter="formatterRating"
>

---

6：效果图