vue-i18n 实现中英文切换

1.安装依赖包：

 npm i vue-i18n --save-dev

2.创建中英文对照js：
assets/i18n/zh.js

module.exports =  {
  title:"中文",
  th:{
    title:"标题",
    user:"账号",
    pwd:"密码"
  }
}

assets/i18n/en.js

module.exports =  {
  title:"English",
  th:{
    title:"Title",
    user:"Account",
    pwd:"Password"
  }
}

3.main.js 引入

import VueI18n from "vue-i18n";
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale:'zh',  // 语言标识
  messages:{
    'zh':require("@/assets/i18n/zh.js"),
    'en':require("@/assets/i18n/en.js")
  }
});

new Vue({
  i18n,
  render: h=>h(App)
}).$mount("#app")

4.使用

<!-- $t是i18n固定用法 -->
<template>
  <div>{{$t('title')}}：{{$t('th.user')}}</div>
  <button @click="changeLanguage('zh')">中文</button>
  <button @click="changeLanguage('en')">英文</button>
</template>
<script>
export default{
  methods:{
    changeLanguage(type){
      //切换语言
      this.$i18n.locale = type
    }
  },
  mounted() {
    console.log(this.$i18n.t("title"))
  }
}
</script>

以上就是vue-i18n的安装以及用法
…φ(๑˃∀˂๑)♪ 学习是我的全部