目前比較流行的國際化插件是 i18n 。我現(xiàn)在記錄，自身的學(xué)歷過程

我所學(xué)習(xí)的是vue-i18n 的插件，基于Vue。

安裝命令是

npm install vue-i18n --save

我在demo 中簡單的使用了一下。大概整理一下思路/

//先看看代碼
/**
在.vue單文件中使用

*/
<template>
    <div class="login">
        <p>{{ $t("message.hello") }}</p>  
        <el-button @click="changelang">中英切換</el-button>
    </div>
</template>

<script>
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) 
//1. 引入需要的模塊 同時使用中間件（use）


const messages = {
    en: {
        message: {
            hello: 'world hello'
        }
    },
    zh: {
        message: {
            hello: '世界'
        }
    }
}
//2.這第二步就是定義map表

/**
第2 和第3 可以以模塊的方式呈現(xiàn)。
*/

const i18n = new VueI18n({
    locale:'zh',
    messages
})
//3.實(shí)例化

export default {
    name: 'login',
    data() {
        return {
        }
    },
    i18n, //4.這一步很重要，掛載 掛載在main.js
    methods: {
        changelang() {
            let self = this
            if (i18n.locale == 'zh') {
            console.log(i18n.messages.zh.message.hello) // 世界
                console.log(i18n.messages)
                i18n.locale = 'en'
                
            } else{
                i18n.locale = 'zh'
                //完成一個簡單切換
            }
        }
    }
}
</script>