i18n 的一点疑问

This topic created in 1382 days ago, the information mentioned may be changed or developed.

比如页面上我有一些静态数据，为了美观、管理方便我放单独的 js 文件下
export const arr1 = [{value:1,label:"测试"},...]
然后页面上 import 使用。如果要实现国际化，有什么优雅点的方式吗？
之前我想的是定义 arr1_zh-CH,arr1_en-US 等数据，页面全部 import 进来，写一个计算属性，根据状态管理存放的 locale 变量 return 其中的一个，有没有更优雅的实现

import

页面

优雅点

export

10 replies 2022-08-04 15:04:26 +08:00

pigspy

Aug 3, 2022

我一般用 i18next 这个框架

jetyang

Aug 3, 2022

标准的做法是后端根据用户的个人信息、UA 及 IP 综合判断 locale ，找到对应的本地文字、图标、时间，返回给前端渲染。搜索一下 ICU 库，但这样做比较麻烦，很多小网站在前端放一个下拉列表，让用户自己选 locale

zhangjiancheng

Aug 3, 2022

我的做法是多个语言放在一个数组内，约定好语言顺序的下标，然后用 webpack 的 api 自动导入然后用$t()使用

Ketteiron

Aug 3, 2022

@pigspy vue-i18n 我试了下好像加载不了数组

fstar

Aug 3, 2022

建议做语言包懒加载。

https://blog.fstars.wang/posts/lazy-load-language-package-by-dynamic-script/
https://blog.fstars.wang/posts/i18n-lazy-import-lang-pkg/
https://blog.fstars.wang/posts/why-i18n-difficult/

Martens

Aug 3, 2022

@dssxzuxc #4 ant design pro 自带国际化可以参考参考

catinsides

Aug 3, 2022

比如要做 label 的多语言，把 label 的内容换成常量，比如 LABEL_TEST ，多语言 json 文件中再写要替换的内容 cn 是测试，en 是 Test ，ja 是テスト... html 里就是{{ $t('LABEL_TEST') }}，再进一步优化就是根据 ua 只加载某一个多语言的 json ，是这意思不？

JounQin

Aug 4, 2022 via iPhone

自己写就是了，简单得很

https://github.com/rx-ts/react/blob/master/packages/%40react-enhanced/translate/src/hook.ts

james504

Aug 4, 2022

看成了 18cm 的一点疑问
啊天啦我太可怕了～～～

Envov

Aug 4, 2022

i18next 的方案很好
https://github.com/i18next/i18next-scanner
扫描源代码中的字符，创建唯一 id ，统一翻译，可以做到懒加载词条，或者把翻译的活扔给产品