vue-i18n国际化插件

获取浏览器默认语言语法：navigator.language
下面是一个简单的demo

1. 安装 npm i -S vue-i18n
2. 在assets文件夹下创建lang文件夹，在里边创建en.json和zh.json文件

{  // en.json
               "common":{
                       "home":"home",
                       "info":"info"
                }
    }

{  // zh.json
                "common":{
                    "home":"首页",
                    "info":"信息"
                 }
    }

1. 在src下创建一个 plugins 文件夹，里边创建 i18n.js 文件并配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) ;
    const i18n = new VueI18n({
               locale:"zh",  //默认设置中文
               messages:{
                zh : require("@/assets/lang/zh.json"), //中文@代表当前文件夹的根目录
                en : require("@/assets/lang/en.json") //英文
                }         
    })
    export default i18n;

1. 将 i18n.js 文件引入 main.js 中

import i18n from './plugins/i18n'
    //挂载到Vue实例
    new Vue({
          render: h => h(App),
          i18n,
    }).$mount('#app')

1. 在组件中使用

<template>
            <div class="hello">
            <p>{{ $t("common.home") }}</p>
            <p>{{ $t("common.info") }}</p>
            <button @click="qieHandle">切换语言</button>
            </div>
    </template>

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