在使用 Ember.js 进行开发时，有一些需要处理的问题，其中一个是RootURL。RootURL 是在构建应用时会自动生成的路径前缀，也就是我们在浏览器中访问应用时的路径。对于在 FastBoot 上运行 Ember 应用的开发者来说，这个问题就更加棘手，因为在 FastBoot 模式下，应用的路径通常不是根路径，而是当前应用程序的子目录 under URL path。
为解决这个问题，有一个 npm 包叫 ember-fastboot-rooturl-patch，今天我们就来学习一下如何使用它。
安装
首先，我们需要通过 npm 安装 ember-fastboot-rooturl-patch：
npm install --save-dev ember-fastboot-rooturl-patch
引入插件
在使用该插件之前，需要在 ember-cli-build.js 文件中引入它：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- -------- - --------------------------------------------
----- --- - --- -----------
-- -------- -- ------------- -
----- -------- - --------------------
----- -------------- - -----------------------------
----- -------------- - -----------------------------
----- ------------------ - ---------------------------------
----- --------------- - ------------------------------
----- -------------- - --- ---------------------------------------
----- ------ - --- ------------------- ----------------
----------------------------------------------------- - ----- -------- ---
----- -------------- - --------------------------
---------------
------------------- -
---------------------------
----------------
-- ------
----------------------------------------
--------------------------
------------------
-
---
----- ------ - --- ----------------
--------- -------
----- -----
----- ----------
--------- -----
---------- -----
----------------- --
------------------ ---
--------------- -----
----------- -------- -------- -
------------------ -------------
--
-------- -------- -- -
------------------- -----------
--
------------- ------
--------- ----
---
---------------
-上述代码中，我们可以看到引入了 ember-fastboot-rooturl-patch 插件，并将其加入了 fastbootMiddleware 列表中。
使用
在 fastboot-config.js 文件中，我们可以设置应用的 rootURL 和 serverRootURL。 rootURL 是应用的根路径，通常为 /；serverRootURL 是 FastBoot 模式下应用的基础 URL。
-- -------------------- ---- -------
---- --------
-------------- - ----- -------------- -
--------------------- -
------------- - ---------
-
-- ------- - ------- ---- -------- -- -- ------ ---------- -----
-- - ---- - --- - -
-- ----- --- ---- ---------- ---------- -------- -- ---- -- --------- -----
-- -- -------------- -------------- --- --- ----- --- ---- -- -- ------ ----
-- -------------------- ------------- --------- -- -------- ------------------
-- -------- --- ----------- --------------- ----- ----- --- ----- --- ----- --
-- ---- ------ ----- --- ---------------- ----- -- -------- -- ------ -----
-- ------------------
------ -
------ ----------------- ---- - ---------- ---- ---------------- ---------------------------- - ---
-
--示例代码
在这里，我们通过一个简单的示例来看一下如何在 Ember 应用中使用 ember-fastboot-rooturl-patch 插件：
-- -------------------- ---- -------
---- --------------- ---
----------- -- -------------
----- -- ------------------ ----
----- --------------- --------- --
---- -------------- -------
------ -- --- ---------
------
-------
----------这是一个简单的首页模板，我们可以像平常一样在这个模板中使用插件 ``jquery。接下来，我们需要在 ember-cli-build.js` 文件中进行设置：
-- -------------------- ---- -------
-- ------------------
-------------- - -------- ---------- -
--- --- - --- ------------------ -
-- --- ------- ----
---
-- -------- --- ------------- -
----------------------------------------------------- -
----- --------
---
-----------------------------------
----- -------------- - ------------------------------------
----- -------------- - --- ----------------------------------------------
-------------- - -------------------------------------
-
------ -------------
--这里，我们需要在 "production" 环境中引入我们的配置，并且在引入中加入全局的 jquery.min.js 库。代码中，fastbootConfig.json 包含了在 FastBoot 模式下的一些配置信息：
{
"serverRootURL": "http://localhost:8080/",
"rootURL": "/",
"defaultLocale": "en_US",
"locales": ["en_US", "zh_CN"]
}到这里，我们就完成了 ember-fastboot-rooturl-patch 的安装与使用。该插件是一个强大的工具，可以让我们更加方便地处理 Ember 应用的 Root URL 问题，使其在 FastBoot 模式下也能够完美运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca40