vue2+vue-i18n实现语言切换

下载安装依赖

npm install vue-i18n@8.2.1 --save

文件目录

src
  — components
      — i18nComps.vue
 — lang
     — zh.js
     — en.js
     — index.js

App.vue

main.js

开始构建

src/components/i18nComps.vue

<!-- 这个按钮方便我们用来切换语言 -->
<template>
  <div>
    <button @click="changeLangEvent()">切换</button>
    <div class="full" >
      <span class="lan">{{language}}</span>
    </div>
    <div class="system">{{$t('h.system')}}</div>
    <div class="system">{{$t('h.name')}}</div>
  </div>

</template>
<script>

export default {
  data (){
    return {
      language: localStorage.getItem("lang") ||"EN"
    }
  },
  methods:{
    changeLangEvent(){
      if (this.language == "EN"){
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
        alert('切换为中文！')
        localStorage.setItem("lang", "ZH");
        this.language = "ZH";
        location.reload(); //重新加载
      } else if (this.language == "ZH"){
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
        alert('Switch to English!')
        localStorage.setItem("lang", "EN");
        this.language = "EN";
        location.reload();
      }
    }

  }
}
</script>

src/lang/zh.js

// 定义中文语言包对象 zh.js

export const h = {
    system: "系统",
    name:'姓名'
}

src/lang/en.js

// 定义英文语言包对象 en.js

export const h = {
    system: "System",
    name:'name'
}

src/lang/index.js

// index.js

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n); // 全局挂载

export const i18n = new VueI18n({
    locale: localStorage.getItem("locale") || "en", // 从localStorage中获取 默认英文
    messages: {
        zh: require("./zh"), // 中文语言包
        en: require("./en") // 英文语言包
    }
});

export default i18n;

main.js

import Vue from 'vue'
import App from './App.vue'
import  i18n  from './lang/index'

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

页面使用

//App.vue

<template>
  <div>
<!-- 切换   -->
    <qhTab />

  </div>
</template>
<script>
import qhTab from '@/components/i18nComps'
export default {
  name: 'App',
  components: {
    qhTab
  },
}
<script>

保存看效果！