vue项目中使用 vue-i18n

安装

npm install vue-i18n@8.25.0 --save-dev

main.js中导入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh': require('./VueI18n/language-zh'),  
    'en': require('./VueI18n/language-en')
  }
})


new Vue({
  el: '#app',
  router,
  store,
  i18n,   // 加入i18n
  components: {
    App
  },
  template: '<App/>'
})

在src创建文件 VueI18n

language-zh.js

export const lang = {
  "home": "家",
  "name": '名字'
}

language-en.js

export const lang = {
  "home": "home",
  "name": 'name'
}

在组件中使用

• this.$i18n.locale 切换语种
• $t(‘lang.home’) 获取对应数据。

<template>
  <div id="app">
    <span>{{ $t('lang.home')}}</span>
    <span>{{ $t('lang.name')}}</span>

    <span @click="changeLaguages()">切换语言</span>
    <!-- <router-view/> -->
  </div>
</template>

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