vue-i18n vue实现国际化

一、安装

npm安装

npm install vue-i18n

二、配置

1、main.js中引入i18n国际化插件

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

2、注册i18n实例并引入语言文件

const i18n = new VueI18n({ 
 locale: 'zh', // 定义默认语言为中文 
 messages: {   
    'zh': require('@/assets/languages/zh.json'),   
    'en': require('@/assets/languages/en.json') 
  }
})

3、将i18n注入到vue实例中

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

4、json文件格式

zh.json文件

en.json文件

三、模板渲染

<p class="statement-text">{{ $tc('Navigation.homePage, 0') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage, 1') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage, 2') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage, 3') }}</p>

这时你会发现，确实可以切换，但是有一个问题，就是第三个和第四个是一样的内容。
刚开始用，也不太理解是为什么
然后我的解决办法是：（zh.json文件和en.json文件同理）

<p class="statement-text">{{ $tc('Navigation.homePage.value1') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage.value2') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage.value3') }}</p>
<p class="statement-text">{{ $tc('Navigation.homePage.value4') }}</p>

就可以啦！但是这种解决办法我觉的不是最好的，如果哪位大佬看见帮忙解决下！万分感谢！