无法在 Phoenix 伞应用程序中加载资源

Question

背景

\n

我有一个旧的雨伞应用程序，我想让它再次焕发活力。为此，我决定使用以下命令添加一个 phoenix 项目：

\n

mix phx.new.web hello_test --no-ecto\n

\n

注意这个--no-ecto部分，这很重要。

\n

设置

\n

在我的伞文件夹中运行上述命令后，我通过添加以下内容apps更改了我的伞文件：config/config.exs

\n

config :phoenix, json_library: Jason\n

\n

解决这个问题后，我apps/hello_test/lib/hello_test/application.ex向该start函数添加了以下内容：

\n

children = [\n      # Start the Telemetry supervisor\n      HelloTest.Telemetry,\n      # Start the Endpoint (http/https)\n      HelloTest.Endpoint,\n      # Start a worker by calling: HelloTest.Worker.start_link(arg)\n      # {HelloTest.Worker, arg}\n      {Phoenix.PubSub, name: HelloTest.PubSub}\n    ]\n

\n

然后我在 apps 文件夹mix assets.deploy中运行hello_test，然后运行 mix phx.server​​.

\n

问题

\n

现在，我希望在加载到 localhost:4000 时看到一些不错的欢迎页面。\n相反，我得到一个没有 css 的页面和一条错误消息：

\n

16:17:44.695 [debug] Processing with HelloTest.PageController.index/2\n  Parameters: %{}\n  Pipelines: [:browser]\n\n16:17:44.737 [info]  Sent 200 in 51ms\n\n16:17:44.821 [info]  GET /assets/app.js\n\n16:17:44.887 [info]  GET /assets/app.css\n\n16:17:44.887 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.js (HelloTest.Router)\n    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2\n    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2\n    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2\n    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2\n    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3\n\n\n16:17:44.897 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (HelloTest.Router)\n    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2\n    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2\n    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2\n    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2\n    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3\n    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3\n

\n

公平地说，到目前为止完成的设置并不简单，但我通过在旧的 github 问题和这个社区中无休止地搜索来完成它。

\n

然而，现在情况不同了。这就像任何凤凰伞应用程序一样简单，但它仍然无法开箱即用。

\n

我找到的唯一解决方案是针对非常旧的 Phoenix 版本，即仍然使用 NPM 的版本。我使用的是最新版本的phoenix，所以这些解决方案不适用：

\n

\xce\xbb mix phx.new --version\nPhoenix installer v1.6.5\n\n\xce\xbb elixir -v\nErlang/OTP 24 [erts-12.1.4] [source] [64-bit] [smp:6:6] [ds:6:6:10] [async-threads:1] [jit]\n\nElixir 1.13.1 (compiled with Erlang/OTP 22)\n

\n

我怎样才能摆脱这个错误并使我的应用程序正确运行？

\n

Answer 1

我自己也遇到过这个。默认情况下，config/dev.exsEndpoint 配置下有一个 esbuild 键，指向默认的 esbuild 配置文件：

config :admin, AdminWeb.Endpoint,
  http: [ip: {127, 0, 0, 12}, port: 4000],
  url: [host: "admin.myapp.test"],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "secret",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
  ]

该配置文件的定义config/config.exs如下：

config :esbuild,
  version: "0.14.0",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../apps/myapp_web/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

它指向默认 Web 应用程序中的资源路径。为了支持多个网络应用程序，您需要添加第二个配置config/config.exs

config :esbuild,
  version: "0.14.0",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../apps/myapp_web/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ],
admin: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../apps/admin_web/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ],

更改密钥（本例中为 admin）以及/apps/目录下的相应路径。然后返回， config/dev.exs切换您的端点配置以指向您刚刚创建的新 esbuild 配置文件。

config :admin, AdminWeb.Endpoint,
  http: [ip: {127, 0, 0, 12}, port: 4000],
  url: [host: "admin.myapp.test"],
  check_origin: false,
  code_reloader: true,
  debug_errors: true,
  secret_key_base: "secret",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:admin, ~w(--sourcemap=inline --watch)]}
  ]

根据您的发布配置，您可能还需要对其他环境执行此操作，但如果您将构建资产作为发布的一部分，您应该能够无需执行此操作即可离开。