前端国际化需求

目前比较流行的国际化插件是 i18n 。我现在记录，自身的学历过程

我所学习的是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 可以以模块的方式呈现。
*/

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

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>