介绍
gocodee-lazy-localize-universal 是一个前端多语言本地化方案，支持 React、Angular、Vue 等主流前端框架，同时也支持原生 Web 实现。该 npm 包为您的前端应用程序提供了一种简单、自动化的方式来从服务器端获取本地化字符串，并实现国际化。
安装
使用 npm 进行安装：
npm install gocodee-lazy-localize-universal --save
使用
- 导入包
在您的 React、Angular、Vue 项目中，将 gocodee-lazy-localize-universal 导入到每个需要翻译的组件中：
// React
import { withTranslation } from "react-i18next";
import { translateDirective } from "vue-i18n";
import { translateService } from "angular-gettext";
import I18n from "i18next";
// Web
import { lazyLoadTranslation } from "gocodee-lazy-localize-universal/lib/lazy-load-translation";- 注册
将您的组件从无国际化版本注册到有国际化翻译版本，通过注入相应服务（ TranslationLoaderService ）来实现：
-- -------------------- ---- -------
-- -------
------ - ------------ - ---- -------
------ - ------------------- ------------------------ - ---- ------------------
------ - ---------- --------- - ---- ----------------
------------
--------- ----------------
--------- -------- ---------- ---- - --------- ----------
--
------ ----- ------------------ ---------- --------- -
------- ------------ - --- ---------------
------------------- ------------------------- ------------------------- -
----- ------------ - ------------------------------------------------------- -- -
----------- ---- ----- ------ ---- -- -- -- -
----------------------- -------------- --------------
----------------
---
---
------------------------------------
-
------------- -
--------------------------------
-
--------- -------- -
------ ----------------------------------
-
--- -------------------- ---- -------
-- ---
------------------------------ ------------------------ -- -
----------
-
---- -----
---------- - ----------- --
--
-- -- -
----------------
-
--
---- 翻译字符串
在您的代码中，可通过相应服务（ TranslationService、 I18n 等）来翻译所需的字符串：
-- -------------------- ---- -------
-- ---
----------
------- ---------- -- -------- ----------- ---------------
-----------
--------
------ - --------------- - ---- ------
------ ------- -----------------
----- ------------
----------- -
---------- -------------------
--
-------- -
---------- --------------- -
------ --------------------------------
--
--
---
----------- -------------------- ---- -------
-- -----
------ - --------------- - ---- ----------------
----- ----------- ------- --------- -
-------- -
----- - - - - -----------
------ -----------------------
-
-
------ ------- -------------------------------示例代码
- React 示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------------- - ---- ----------------
----- ----------- ------- --------- -
-------- -
----- - - - - -----------
------ -----------------------
-
-
------ ------- -------------------------------- Vue 示例代码：
-- -------------------- ---- -------
----------
------- ---------- -- -------- ----------- ---------------
-----------
--------
------ - --------------- - ---- ------
------ ------- -----------------
----- ------------
----------- -
---------- -------------------
--
-------- -
---------- --------------- -
------ --------------------------------
--
--
---
---------- Web 示例代码：
-- -------------------- ---- -------
------------------------------ ------------------------ -- -
-----------
---- -----
---------- - ----------- --
-- -- -- -
----- ------- - -------------------------------------------
-- ---------
----------------- - ----------------
---
---结论
gocodee-lazy-localize-universal 为前端开发人员提供了一种简单的方式来实现国际化多语言，无论您使用的是前端框架还是原生 Web 开发，都可以轻松地使用此 npm 包。在本地化实现方面，该 npm 包提供了一套完整的解决方案，从而为用户提供优质的本地化体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e6d9381d61a3540b36