播放框架：如何用静态 js 和 css 渲染静态 HTML 页面？

Posted 2023-02-26

【中文标题】播放框架：如何用静态 js 和 css 渲染静态 HTML 页面？

【英文标题】：Play framework: how to render static HTML pages with static js and css?

【发布时间】：2018-11-26 06:03:54

【问题描述】：

我正在尝试找出一种方法来呈现或路由到托管在 Play 的公共文件夹中的一些静态 Web 应用程序。我的项目结构如下：

myapp
  + app
  + conf
  + modules
  + public
      |   + webapp1
      |        + css
      |        + images
      |        + index.html
      |   + webapp2
      |        + css
      |        + images
      |        + index.html
  + ...

我想渲染 webapp1 和 webapp2。每个 web 应用中的 index.html 将使用每个 web 应用中 css 文件夹中的 css 文件。

我尝试使用这样的路由并在控制器中使用重定向来呈现静态 html 页面：

Redirect("/webapp1/").withCookies(Cookie("token", "")).bakeCookies()
Redirect("/webapp2/").withCookies(Cookie("token", "")).bakeCookies()
GET  /webapp1/  controllers.Assets.at(path="/public/webapp1", file="index.html")
GET  /webapp1/*file   controllers.Assets.at(path="/public/webapp1", file)
GET  /webapp2/  controllers.Assets.at(path="/public/webapp2", file="index.html")
GET  /webapp2/*file   controllers.Assets.at(path="/public/webapp2", file)

index.html 将被正确路由和呈现。但是，文件夹中的 css 和图像未正确加载。 index.html 使用相对路径加载它们。然后以某种方式在 localhost/css/css1 等顶层加载 css 和图像，而不是 localhost/webapp1/css/css1。

建议将不胜感激。

比尔

【参考方案1】：

尝试使用下面的路由来加载 css 和 javascript。

用于加载 CSS：

/css/*file controllers.Assets.at(path="/public/css", file)

用于加载 Java 脚本：

/javascript/*file controllers.Assets.at(path="/public/css", file)

【参考方案2】：

对于面临类似情况的人来说，让多个网络应用在 Play 中运行的最佳方法是在静态资源的相对路径中添加一个路径。

例如，在 webapp1 的 index.html 中，不是将 css 加载为 <link href="/static/css/hash.chunk.css" rel="stylesheet">，而是将 css 加载为 <link href="/webapp1/static/css/hash.chunk.css" rel="stylesheet">。

然后在播放路由文件中，你可以像这样配置 GET /webapp1/*file controllers.Assets.at(path="/public/webapp1_folder", file).

这样就可以了。