Phoenix：如何服务单页应用程序

我想将 Phoenix 设置为提供静态 index.html，无论发送到它的路由是什么，无需更改 URL，同时提供对非 html 资源（.js、.css、.jpg...）的访问，因为我的 SPA（在 Elm）会查看路线并找出要做什么。

基于this https://stackoverflow.com/questions/32407528/precompiled-single-page-apps-in-phoenix-app and this https://stackoverflow.com/questions/35100117/how-to-serve-static-page-in-phoenix-framework我尝试过以下方法，但没有成功

端点.ex

  plug Plug.Static,
    at: "/", from: :mosaic_api, gzip: false,
    only: ~w(assets css fonts images js favicon.ico robots.txt index.html)

路由器扩展程序

  scope "/", Api do
    pipe_through :browser # Use the default browser stack
    get "/*path", PageController, :index  # :elm
  end

页面控制器.ex

defmodule Api.PageController do
  use Api.Web, :controller

  plug :action  # Edit: now removed

  def index(conn, _params) do
    conn
    |> put_layout(false)
    |> render("index.html")
    # Edit: replaced 3 lines above by: html(conn, File.read!("priv/static/index.html"))
  end

  def elm(conn, _params) do
      redirect conn, to: "/index.html"
  end
end

With :index我收到一个与 Phoenix 相关的（但不是标准主页）页面和一个控制台错误(Plug.Conn.AlreadySentError) the response was already sent，同时与:elm我最终到达 /index.html 并且丢失了路由信息。

only: ~w(... index.html)

conn
|> put_layout(false)
|> render("index.html")

看来你试图渲染静态index.html那不行。这put_layout/2禁用或更改包装器布局。render/2设置要用作内容的文件。默认此文件位于/web/templates/MODULE/.

您可以使用Phoenix.Controller.html/2 https://hexdocs.pm/phoenix/Phoenix.Controller.html#html/2发送自定义 html 内容的函数。读取文件文件.读取！/2 http://elixir-lang.org/docs/stable/elixir/File.html#read!/1并将内容发送给客户端。

def index(conn, _params) do
  html(conn, File.read!("priv/static/index.html"))
end

我不确定是否还有其他更清洁的解决方案，但这应该可行。 希望这可以帮助。

EDIT:

解决AlreadySentError通过删除plug :action从您的控制器。从 0.14.0 版本开始自动调用。

看看这些0.13.x to 0.14.0升级说明 https://gist.github.com/chrismccord/57805158f463d3369103使您现有的应用程序加快速度。

• Backward incompatible changes
  • [控制器]plug :action现在自动调用