使用vue、react可以前后端分离开发，然后多语言问题怎么办

leonardofed 发布于2019-08-21 17:18 / 1554人阅读

摘要：前端多语言加载器，前端部署好各个语言的或语言包，可结合等使用。多语言，不就从浏览器里拿信息么，前端也可以。借此做一个前端语言包加载器。前端多语言加载器的特点切换语言，不用刷新页面，语言包的一下就替换了。

multi-lang-js

前端JavaScript多语言加载器，前端部署好各个语言的json或txt语言包，可结合vue等使用。

多语言，不就从浏览器navigator.language里拿信息么，前端也可以。借此做一个前端语言包加载器。

demo示例

    
        {{ langContent.title }}
        {{ langContent.name1 }}
        {{ langContent.name2 }}
        {{ langContent.name3 }}

初始化multiLang.init()

参数名	类型	说明
path	str	翻译文本的相对路径，这里我把所有翻译文本放到css文件夹下
dataType	str	值为 txt 或者json。可忽略此参数，默认为json，值为txt时，则返回的是txt文本
name	obj	各个语言对应加载的翻译文本，属性名不可改，对应的文本名字可以改
callback	fun	回调的第一个参数是加载到的json(或者文本)数据，第二个数据是当前客户端的语言名字

设置语言multiLang.setLang(langname,callback)

如果你觉得multiLang.setLang 使用麻烦，也可以：localStorage.lang=langname，这种写法

注意：设置语言，会让全站语言都立马改动，demo可参考github上的页面。
开多个页签试试 https://diyao.github.io/multi...

参数名	类型	说明
langname	str	必须设置，你要设置的语言名
callback	function	可选的回调函数

测试

初始化判断当前是何种语言的逻辑：先查浏览器地址栏lang 参数，其次查 localStorage.lang的值，最后看浏览器语言

所以为了测试预览，你可以在地址后带入参数，lang=en(你想要的语言 ru、ko、th等)。

https://diyao.github.io/multi...

说明

如果你配置的name中，没有（比如当前埃及用户访问），则默认会加载英文的显示。

前端多语言加载器的特点

切换语言，不用刷新页面，语言包biu的一下就替换了。某个页签切换语言，全站其他页签biu的一下，全都换了

npm install multi-lang-js

https://www.npmjs.com/package...

云服务器 GPU云服务器前后端分离开发阿里云前后端分离项目怎么部署服务器前后端分离 android多语言开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89361.html

Vue ui 大法哪家强？

Element iView Vuex Mint UI Vant cube-ui，对比六大 vue ui 组件库，选中最适合的那个。 Element(pc) 介绍 & 版本饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8 Star：32.067k 项目特色团队维护支持三个版本：vue、react、angular 支持 Nuxt.js 常规支持：多语言、自定义主题、按需引入、内置...

Edison 2019-08-23 12:45 评论0 收藏0
用koa开发一套内容管理系统（CMS），支持javascript和typescript双语言

摘要：而在国内确实用的人太少，国内的主流服务端语言都被霸占。因此，在进行调研和诸多权衡后，团队选择了作为第二支持语言。整体上使用开发，也用了一些的特性，之所以用，是因为对于项目的开发和维护有极大的益处。初衷 lin-cms是我们林间有风团队开源的一款CMS，它采用目前主流的前后端分离的架构，前端使用vue作为基础框架，后端选择了我们团队大量实践使用的flask作为基础框架。 lin-cms...

lncwwn 2019-08-23 15:24 评论0 收藏0
项目经验总结

摘要：项目中前端开发问题经验总结下的安全限制问题问题描述数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用来实时和定时推送数据来保证数据的实时性和有效性。项目中前端开发问题经验总结 ie下websocket的安全限制问题问题描述：数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时...

William_Sang 2019-08-23 15:56 评论0 收藏0
编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

txgcwm 2019-08-26 11:46 评论0 收藏0
编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

DevWiki 2019-08-01 18:35 评论0 收藏0