vue实现不同语言的切换

• 安装vue-i18n： npm install vue-i18n --save-dev
• 在main.js中添加这些代码

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(
  {
    locale: window.localStorage.getItem('language') == null ? "zh" : window.localStorage.getItem('language'),    // 语言标识
    messages: {
      'zh': require('@/assets/lang/zh'),
      'en': require('@/assets/lang/en')
    }
  }
)
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

3.在assets中添加上面得文件夹

module.exports = {
    header:{
      index:"首页"
    }
}

在需要切换得地方使用

<template>
  <div class="max" :style="scrollTop>180?'box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);':''">
    <div class="header">
      <!-- 导航 -->
      <div>
        <!-- 大屏导航 -->
        <ul class="header-ul">
          <li class="header-li" :class="external==item.external?'success':''" v-for="(item,index) in list" :key="index"
            @click="changExternal(item.external)">
            {{$t(item.title)}}
           </li>
          <li class="header-li"><span :class="language=='zh'?'isColor':''" @click="changeIanguage('zh')">中文</span>/
            <span :class="language=='en'?'isColor':''" @click="changeIanguage('en')">EN</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    // 定义属性
    data() {
      return {
        language: window.localStorage.getItem("language") == null ? 'zh' : window.localStorage.getItem("language"),
        list: [{
            title: "header.index",
            external: "index",
          }
        ]
      }
    },
    // 方法集合
    methods: {
      // 改变预言
      changeIanguage(language) {
        window.localStorage.setItem("language", language)
        this.$i18n.locale = language //这个代码负责实时切换语言
      }
    },
  }

</script>