vue-i18n 实现中英文切换

一、安装

1.npm 安装

npm install vue-i18n

2.yarn 安装

 yarn add vue-i18n

3.script 引入

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

 <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

二、在 main.js 中引入 vue-i18n

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

三、创建VueI18n 实例

const i18n = new VueI18n({
    locale: 'zh',           // 语言标识 'zh'、'en'、localStorage.getItem('locale')
    fallbackLocale: 'zh',   //  没有英文的时候默认中文语言
    silentFallbackWarn: true,  // 设置为true后，在组件内使用时在浏览器不会报警告
    messages: {
      en: require('@/locales/en.json'),    // 英文语言包
      zh: require('@/locales/zh.json')     // 中文语言包
    }
})

四、把 i18n 挂载到 vue 根实例上

const app = new Vue({
    router,
    i18n,
    ...App
}).$mount('#app')

五、zh.json

{
    "user"：{
        "name": "用户名"
    },
    
    "common": {
        "title": "你好世界"
    }
}

六、en.json

{
    "user"：{
        "name": "username"
    },
    
    "common": {
        "title": "helloworld"
    }
}

七、使用渲染

<div id="app">
    <p>{{ $t("common.title") }}</p>
    <p>{{ $t("user.username") }}</p>

    <p> this.$i18n.locale  通过切换locale的值来实现语言切换</p>
</div>