vue-i18n<多语言配置>

效果图：

安装：

npm install --save vue-i18n

文件目录： 创建一个 lang 文件夹

en.js

export default {
  message:{
    title:'Title'
  }
}

zh.js

export default {
  message:{
    title:'标题'
  }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zhLocale from './zh'
import enLocale from './en'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh', //默认显示语言
  messages: {
    zh: {
      ...zhLocale,
    },
    en: {
      ...enLocale,
    }
  }
})

export default i18n

main.js中引入

使用：

<template>
  <div>
    <span>{{$t('message.title')}}</span>
    <button @click="changeLang">切换</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang() {
      let lang = this.$i18n.locale
      this.$i18n.locale = lang == 'zh' ? 'en' : 'zh'
    }
  }
}
</script>

<style>
</style>