前端国际化需求

目前比较流行的国际化插件是 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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,171评论 8 124
  • 一 遇见 如果再回到那个傍晚,王振也许不会再游逛着走到那个街头,那个路口,不会再怂恿自己去帮助那个倒地的老人...
    王艾柯阅读 168评论 0 1
  • 姓名:黄太平 公司:宁波大发化纤有限公司 组别:301期反省组学员 【知~学习】 1、《六项精进》读 1遍 2、《...
    黄太平阅读 150评论 0 0
  • 黄酒三 陈皮再 新桃一枚雄黄半 夜雨星点凭栏尽 须是式微极九天 妾即月 君可见
    梦见王先生阅读 216评论 1 5