代码之家 › 专栏 › 技术社区 › Flame_Phoenix

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

phoenix elixir

Flame_Phoenix · 技术社区 · 4 年前

出身背景

我有一个旧的雨伞应用程序,我正试图把它再次带到生活中。为此,我决定在伞下添加一个phoenix项目,使用:

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

注意 --no-ecto 这一点很重要。

安装程序

跑完后,我在雨伞里说 apps 我换了伞的文件夹 config/config.exs 文件中添加以下内容:

config :phoenix, json_library: Jason

有了这些,我去了 apps/hello_test/lib/hello_test/application.ex 并添加到 start 功能如下:

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

然后我跑了 mix assets.deploy 里面 hello_test apps文件夹,后跟 mix phx.server .

问题

现在,当加载到localhost:4000时,我希望看到一些漂亮的欢迎页面。相反,我得到了一个没有css的页面和一条错误消息:

16:17:44.695 [debug] Processing with HelloTest.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]

16:17:44.737 [info]  Sent 200 in 51ms

16:17:44.821 [info]  GET /assets/app.js

16:17:44.887 [info]  GET /assets/app.css

16:17:44.887 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.js (HelloTest.Router)
    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2
    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2
    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3


16:17:44.897 [debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (HelloTest.Router)
    (hello_test 0.1.0) lib/phoenix/router.ex:406: HelloTest.Router.call/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.plug_builder_call/2
    (hello_test 0.1.0) lib/plug/debugger.ex:136: HelloTest.Endpoint."call (overridable 3)"/2
    (hello_test 0.1.0) lib/hello_test/endpoint.ex:1: HelloTest.Endpoint.call/2
    (phoenix 1.6.5) lib/phoenix/endpoint/cowboy2_handler.ex:54: Phoenix.Endpoint.Cowboy2Handler.init/4
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) c:/Users/User/Workplace/market_manager/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3

公平地说,到目前为止所做的设置并不是微不足道的,但我通过无休止地搜索旧的github问题和这个社区来管理它。

然而,现在情况不同了。这和任何phoenix雨伞应用程序一样简单,但它仍然无法开箱即用。

我找到的唯一解决方案是非常古老的Phoenix版本,那些仍然使用NPM的版本。我使用的是phoenix的最新版本,因此这些解决方案不适用:

Î» mix phx.new --version
Phoenix installer v1.6.5

Î» elixir -v
Erlang/OTP 24 [erts-12.1.4] [source] [64-bit] [smp:6:6] [ds:6:6:10] [async-threads:1] [jit]

Elixir 1.13.1 (compiled with Erlang/OTP 22)

我怎样才能摆脱这个错误,让我的应用程序正常运行?

0 回复 | 直到 4 年前

Dan Thiffault 4 年前

我自己也遇到了。默认情况下 config/dev.exs 端点配置有一个指向默认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应用程序中的资产路径。为了支持多个web应用,您需要在其中添加第二个配置 config/config。前男友

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)]}
  ]

根据您的版本配置,您可能还需要在其他环境中执行此操作,但如果您将构建资产作为您的版本的一部分,那么您应该能够不执行此操作而获得成功。

Flame_Phoenix 4 年前

答复

因此,经过一些研究,我最终创建了一个全新的雨伞项目,里面有一个child phoenix应用程序。这个问题无处可寻,一切正常。

mix new koko --umbrella
cd koko/apps
mix phx.new.web hello --no-ecto
cd hello
mix assets.deploy

所以所有的一切都指向了我旧雨伞应用程序中的一些问题。因为我想做更多的测试,我创建了另一个phoenix应用程序和 hello 一

然后我就可以复制这个问题。

在这一点上,我怀疑如果你试图:

添加多个phoenix儿童应用
添加一个新的phoenix child应用程序,当该项目在过去已经有一个(并被删除)

我无法理解为什么会出现这种情况,但我无法理解的是这里的含义:我必须用一个全新的雨伞应用程序重新制作我的项目,然后重新开始。