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>