前端国际化的思考与实践

国际化本质上就是字符串替换,在应用中主要考量实施的环境和业务的需求,宏观上只要有语言包,那么需要考虑的就是语言环境在什么时候获取,像本文中,可以在编译时获取,可以在初始化主页面时候获取,也可以像很多博客中一样在运行时通过按钮进行切换。另外需要说明的是字符串替换其实可以解决很多问题,最基本的是替换文字,也可以替换资源如图片视频等,还可以替换请求域名等等,这些都可以在项目中灵活改变。当我们思路打开,简单的东西可以解决很多复杂的事情。本文4个月前就开头了,今天才写完,主要是最近大作太多,刚肝玩,开始学习总结。
摘要由CSDN通过智能技术生成
写在开头

之前一直听别人在后台模板中或者博客模板中提到国际化,i18n等,但是自己只是百度谷歌浏览了解一下,并未深入,直到上月公司开始拓展海外市场。我这边就提前考虑到业务这边会有国际化的需求,就开始进行详细的技术调研。

官网英文版

最开始是想把公司的主产品的官网进行英文版改造。官网是php+webpack+html+css+jq进行开发的。

当时的第一个思路是在git上且一个语言分支,通过jquery-i18n库进行改造,两个分支的language配置不同就行了。但是后来想了一下,这样如果有更新,分支同步也挺麻烦,总是需要改动language配置。

然后就有了第二个思路,因为反正官网也不需要把切换语言环境的功能放在主页上,而是不同的语言版本都投放到特定的渠道上,就通过编译命令传参的方式将不同的环境通过编译命令传入到编译后的包中。

这里就需要解决两个问题,一是编译命令传参,一是webpack注入全局变量。

webpack注入全局变量,在我之前的文章中有提到,感兴趣的可以去翻一翻。这里贴一下编译命令传参,其实也很简单:

 // 1、通过--argv=value来传递参数// 2、通过cross-env CONST_ARGV=value来传递参数"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:cn": "npx webpack --config build/webpack.config.js --mode production --
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值