随着前端开发的不断发展，国际化渐渐成为了一个不可或缺的技术点。解决国际化问题的方法有很多，其中一种比较流行的方式是使用 ember-intl-phraseapp 包。本文将详细介绍该包的使用方法及注意点。
安装
在安装 ember-intl-phraseapp 之前，需要先安装 Ember CLI，如果还未安装，请先运行以下命令进行安装：
npm install -g ember-cli
接着，在项目中安装 ember-intl-phraseapp 包：
npm install ember-intl-phraseapp --save-dev
配置
安装完 ember-intl-phraseapp 包之后，需要在配置文件中进行一些修改。
修改 config/environment.js 文件
在 config/environment.js 文件中，需要增加下面的配置：
-- -------------------- ---- -------
-------------- - --------------------- -
--- --- - -
----- ---- ---
----------------------- -
----------- -----------------------------------------------------------------------------------------------------
---------- -----------------
------- ------
------- ----------------------------------
-------- ------ -------- -------- --------
-
--
-- ---
------ ----
--phrasesUrl参数指定了从 PhraseApp 上下载国际化翻译文件的 URL，需要替换使用自己项目的 URL。其中，projectId是项目 ID，可在 PhraseApp 控制台中获得。authToken参数是一个访问 token，需要替换使用自己项目的 token。可在 PhraseApp 控制台中创建新的 token。format参数指定了下载的翻译文件类型，这里使用了hbs类型。output参数指定了国际化文件的输出目录。locales参数指定了项目支持的语言列表。
修改 Brocfile.js 文件
在 Brocfile.js 文件中，需要将 ember-intl-phraseapp 包的插件添加到 EmberApp 的插件列表中：
-- -------------------- ---- -------
--- -------- - --------------------------------------------
--- ------------------ - ----------------------------------------------------
--- --- - --- ----------
-- ---
----- -
-- --- ---- ---
-------- -
------------------
-
--
-- ---
---
-------------- - -------------使用
在配置好国际化文件下载地址和输出目录之后，可以通过运行以下命令下载翻译文件：
ember intl:download
运行完命令之后，在指定的输出目录中，会生成一个 translations.js 文件，里面包含了所有翻译信息。可以通过在 .hbs 文件中使用 {{t}} helper 来使用这些翻译信息。例如：
{{t 'helloWorld'}}其中，'helloWorld' 将会被翻译成对应的语言。
此外，还可以在组件中使用 intl 服务来获取和设置当前的语言。例如：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------ -- ------- - ---- -----------------
------ ------- ------------------
----- ----------
-------- -
--------------------- -
----------------------- ----------
-
-
---在组件中，可以通过调用 this.intl.set('locale', language) 方法来设置当前的语言。language 参数为语言代码。
示例代码
config/environment.js 文件：
-- -------------------- ---- -------
-------------- - --------------------- -
--- --- - -
----------------------- -
----------- -----------------------------------------------------------------------------------------------------
---------- -----------------
------- ------
------- ----------------------------------
-------- ------ -------- -------- --------
-
--
-- ---
------ ----
--Brocfile.js 文件：
-- -------------------- ---- -------
--- -------- - --------------------------------------------
--- ------------------ - ----------------------------------------------------
--- --- - --- ----------
-- ---
----- -
-- --- ---- ---
-------- -
------------------
-
--
-- ---
---
-------------- - -------------组件：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------ -- ------- - ---- -----------------
------ ------- ------------------
----- ----------
-------- -
--------------------- -
----------------------- ----------
-
-
---在模板中使用：
<div>{{t 'helloWorld'}}</div>
<button {{action "setLanguage" "en"}}>English</button>
<button {{action "setLanguage" "de-DE"}}>Deutsch</button>
<button {{action "setLanguage" "zh-CN"}}>中文</button>
<button {{action "setLanguage" "ja-JP"}}>日本語</button>总结
本文介绍了如何使用 ember-intl-phraseapp 包来解决国际化问题。透过本文的讲解，我们可以学到如何配置国际化参数、下载翻译文件、使用 {{t}} helper 进行翻译以及如何在组件中切换语言等技能。这些技能可以帮助我们在开发中更好地解决国际化问题，提升产品的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecb84