专栏首页coding个人笔记vue国际化vue-i18n简单使用

vue国际化vue-i18n简单使用

之前一直想做个国际化、在线换肤和拖拉拽生成网页的demo,或者说实现思路。拖拉拽生成网页一直没什么思路,今天先实现国际化。当然是直接用插件了,并不是自己实现

vue-i18n使用很简单:

安装依赖:npm i vue-i18n -S

引入、调用:

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
生成实例:
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/lang/zh.js'),
    'en': require('@/assets/lang/en.js')
  }
});

locale默认采用messages里面的哪个语言,js里面内容:

en.js:

export const lang = {
    login: 'login',
    register: 'register',
    rember: 'rember',
    home: 'home',
    about: 'about',
    aboutDesc: 'This is an about page'
}

zh.js:

export const lang = {
    login: '登录',
    register: '注册',
    rember: '记住密码',
    home: '首页',
    about: '关于',
    aboutDesc: '这是关于页面'
}

跟store一样,把实例传给vue:

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

内部会把i18n通过mixin合并到vue实例上,新加属性i18n、t等属性方法。

直接使用:
{{$t('lang.login')}}

切换语言:

this.$i18n.locale = type;

效果:

实现起来很简单,你可以打印$t看看,其实就是一个方法,返回对应的内容:

难的是内容对应的zh.js和en.js,更别说其他语言了。当然,vue-i18n还提供了其他属性和方法,只是官网我打不开,没办法多说一些。

element-ui也是通过切换语言文件实现的。只是更复杂,可以去稍微看一下内容,是真的可怕,那么多内容都要翻译和一一对应:

另外就是如果要切换过程页面整体布局不会很明显,对每一个内容高度宽度要稍微注意一下,毕竟不同语言宽高比例不一样。至于vue官网的,我看见是直接地址都变了,也不知道是不是采用这种思路,直接替换文本内容。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux强大的awk(一)

    最近在公司遇一个需求,要从上个月甚至是半年的日志文件中筛选出用户首次访问站点,是通过什么入口跳转进来的,访问的资源有哪些等等一些信息,无奈日志实在太大,需要经过...

    wade
  • 初始化CSS

    做前端的人都知道,新建的html几乎所有的标签都是有margin和padding的,这对于写样式的时候影响很大。于是出现了reset.css,他把所有的标签...

    wade
  • Vue-devtools安装

    最近用vue开发,需要看一下vuex的数据结构,原本也没什么,就安装了一下vue-devtools,这边重温一下安装的过程。

    wade
  • 大数据告诉你,最不受欢迎的编程语言居然是……

    导读:哪些编程语言被开发者喜欢?哪些让人讨厌?笔者通过在Stack Overflow分析用户创建的开发者履历,得出了最不受开发者欢迎的编程语言,还有最受开发者欢...

    华章科技
  • python lmdb使用

    学习LMDB的时候不禁想到知乎上的提问“有哪些名人长期生活在其他名人的光环下”,说实话感觉查它的人基本都是为了用Caffe……

    bear_fish
  • RTMP vs SRT:延迟与最大带宽的比较

    文来自Haivision的白皮书,比较了RTMP和SRT两种流媒体协议的优缺点,并通过实验测试了两种协议在延迟和最大带宽两方面的表现。

    用户1324186
  • 【论文读书笔记】重新考虑用简单神经网络进行知识表示学习(附代码)

    【导读】随着知识图谱越来越火,知识图谱的表示渐渐成为研究重点,目前已经有 TransE,TranH,ComplEX 等一系列的方法,这些方法在标准数据集中都取得...

    WZEARW
  • weevely用法

    Weevely是一款python编写的webshell管理工具,作为编写语言使用python的一款工具,它最大的优点就在于跨平台,可以在任何安装过python的...

    周俊辉
  • 使用C语言中的头文件有什么技巧和注意事项吗?为什么不直接包含C文件呢?

    从事嵌入式开发多年,对于C语言使用的频率比较多,现在讲讲C语言在平时编程工作中经常出现的一些问题,就以楼主的题目为切入点分析归纳下,分享给正在使用或者学习C语言...

    程序员互动联盟
  • 在软件测试中UT,IT,ST,UAT分别是什么意思

    UT(Unit Test)即软件测试分类中的单bai元测试,它是对程序du中的最小可测单元zhi进行测试,一般理解的单元测试就是针dao对代码的测试,通常采用一...

    用户7557625

扫码关注云+社区

领取腾讯云代金券