美文网首页
VUE多语言实现方式改进

VUE多语言实现方式改进

作者: cd2001cjm | 来源:发表于2018-05-29 09:42 被阅读0次

vue-i18n是vue国际化的常用方案,但在实际项目运行中,我们发现有很多不方便使用的地方,

所以我们基于vue-i18n,实现架构上进行了调整,降低开发时,增重运行时。


一,VUE的标准实现方式

二,vue-i18n方式的缺点分析

这种方式,开发时的比重过大。

1,当词条发生变更时,还需要重新编译发布。

2,当词条数量较大时,基于文件的查找修改替换,操作不方便

3,当一个项目分组协作,语言包文件的维护极其不便

为此,我们对该结构进行了调整

三,最终采用的实现方式

1

1,我们通过词条管理UI(具备在线翻译功能),将数据持久化到数据库中

2,在运行平台启动一个监控程序,将数据库的数据,按关键应用抽取生成为js脚本。

3,运行平台在运行时,动态加载语言js脚本

4,页面上依然保持vue-i18n的使用方式不变

这样的好处:

当词条数量很多时,比如到达百万条的时候,维护操作更为简单

词条修改后自动生效,无需重新编译发布

多部门协作时,可以避免词条冲突或相互覆盖

相关文章

  • VUE多语言实现方式改进

    vue-i18n是vue国际化的常用方案,但在实际项目运行中,我们发现有很多不方便使用的地方, 所以我们基于vue...

  • vue-i18n实现多语言

    1. 前言 (1) 需求 Vue工程,需要实现多语言切换功能。 (2) vue-i18n插件 npm中对vue-i...

  • 网站多语言

    在vuejs / awesome-vue中找到能够实现多语言包的插件kazupon / vue-i18n。文档写的...

  • uni-app 语言化 Vue-i18n

    说到vue-i18n,我们并不陌生,国际化多语言实现。 1.安装依赖包 2.注入vue实例中,项目中实现调用api...

  • vue总结

    vue路由守卫 vue实现双向绑定原理 Vue生命周期: vue跨域方式 vue-router实现原理 vue-r...

  • 国际化:i18n实现多语言

    如果项目需要多语言的支持,我们需要做国际化 使用 vue-i18n 来实现多语言的界面 安装 关于语言包,我们有几...

  • Flutter 多语言&多主题实现

    目录 多语言实现 多主题实现 状态管理 切换多语言 切换多主题 多语言实现 1. AndroidStudio-> ...

  • vue-Vue的watch实现原理及watch实现方式

    vue--Vue的watch实现原理及watch实现方式 参考: https://www.jianshu.com/...

  • vue多语言实现

    1.安装 2.在main.js里配置il8n 3.创建il8n实例在main.js中挂载3-1.实例文件夹: 3-...

  • uniapp与i18n实现国际化

    参考:uniapp与vue-i18n实现国际化多语言 1. main.js 备注:main.js文件:定义全局函数...

网友评论

      本文标题:VUE多语言实现方式改进

      本文链接:https://www.haomeiwen.com/subject/xzxnjftx.html