Phoenix应用如何配置两个前端并解决Nuxt静态路由匹配问题

方案1：使用Plug.Static内置索引功能（推荐，Plug版本≥1.11） #

Plug.Static本身支持配置目录索引文件，你只需要给/app对应的静态资源配置加上indexes参数即可：

plug Plug.Static,
  at: "/app",
  from: "myapp-app/dist",
  gzip: false,
  indexes: ["index.html"]

加完这个配置后，访问/app/posts时，Plug会自动查找对应posts目录下的index.html文件返回，完全符合你的需求。

方案2：低版本Plug兼容方案 #

如果你的Plug版本低于1.11没有indexes参数，可以加一个自定义中间件处理路径重写：

1. 新增Plug文件 lib/myapp_web/plugs/nuxt_index_fallback.ex

defmodule MyAppWeb.Plugs.NuxtIndexFallback do
  @behaviour Plug
  @prefix "/app"
  @dist Path.expand("../../../myapp-app/dist", __DIR__)

  @impl true
  def init(opts), do: opts

  @impl true
  def call(conn, _opts) do
    if String.starts_with?(conn.request_path, @prefix) do
      relative = String.replace_prefix(conn.request_path, @prefix, "") |> then(&if &1 == "", do: "/", else: &1)
      index_path = Path.join([@dist, relative, "index.html"])
      if File.exists?(index_path), do: %{conn | request_path: conn.request_path <> "/index.html"}, else: conn
    else
      conn
    end
  end
end

2. 调整Endpoint中Plug的顺序：

# 先处理可直接命中的静态资源
plug Plug.Static, at: "/app", from: "myapp-app/dist", gzip: false
# 重写目录路径为对应index.html
plug MyAppWeb.Plugs.NuxtIndexFallback
# 再次处理重写后的路径命中index.html
plug Plug.Static, at: "/app", from: "myapp-app/dist", gzip: false
# 原有根路径静态配置不变
plug Plug.Static,
  at: "/",
  from: :myapp_web,
  gzip: false,
  only: ~w(css fonts images js robots.txt favicon.ico)

补充：动态路由兜底 #

如果你的Nuxt应用存在未预生成静态文件的动态路由（比如/app/posts/[id]这种参数路由），可以在路由中加兜底规则，避免404：

1. 在router.ex末尾新增scope：

scope "/app", MyAppWeb do
  pipe_through :browser
  get "/*path", PageController, :nuxt_fallback
end

2. 对应Controller中新增方法：

def nuxt_fallback(conn, _params) do
  index = Path.join(File.cwd!(), "myapp-app/dist/index.html")
  html(conn, File.read!(index))
end

你当前的挂载方案是合理的，静态资源直接由Phoenix处理，不需要额外引入反向代理，部署简单，适合中小团队、前后端协同发布的场景。
可以参考的优化点：

• 生产环境建议开启gzip：Nuxt构建时开启gzip输出，Plug.Static配置gzip: true，大幅降低静态资源传输体积
• 如果你有SEO需求，可以把Nuxt改为SSR模式，独立部署Nuxt服务，生产环境用Nginx反向代理/app前缀到Nuxt服务，Phoenix只处理API请求，前后端发布互不影响，性能也更好
• 如果是大流量项目，也可以把Nuxt静态资源上传到对象存储，配CDN加速，访问速度会比直接由Phoenix返回静态资源更快

内容的提问来源于stack exchange，提问作者Hoggie