榆树浏览器应用程序不显示

Question

我从 here, and the Elm code from here 复制了 HTML。我对 Elm 代码所做的唯一更改是添加了第一行 - module Main exposing (..)。我的 IDE 在抱怨。然而，当我在浏览器中打开 index.html 时，出现空白屏幕并且页面标题仍然是“Main”。我做错了什么？

这是我的项目结构

new-project
  elm-stuff
  src
    Main.elm
  elm.json
  index.html
  main.js

这里是index.html:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <script src="main.js"></script>
</head>
<body>
  <script>var app = Elm.Main.init();</script>
</body>
</html>

这里是Main.elm:

module Main exposing (..)

import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Url



-- MAIN


main : Program () Model Msg
main =
  Browser.application
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    , onUrlChange = UrlChanged
    , onUrlRequest = LinkClicked
    }



-- MODEL


type alias Model =
  { key : Nav.Key
  , url : Url.Url
  }


init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
  ( Model key url, Cmd.none )



-- UPDATE


type Msg
  = LinkClicked Browser.UrlRequest
  | UrlChanged Url.Url


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    LinkClicked urlRequest ->
      case urlRequest of
        Browser.Internal url ->
          ( model, Nav.pushUrl model.key (Url.toString url) )

        Browser.External href ->
          ( model, Nav.load href )

    UrlChanged url ->
      ( { model | url = url }
      , Cmd.none
      )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.none



-- VIEW


view : Model -> Browser.Document Msg
view model =
  { title = "URL Interceptor"
  , body =
      [ text "The current URL is: "
      , b [] [ text (Url.toString model.url) ]
      , ul []
          [ viewLink "/home"
          , viewLink "/profile"
          , viewLink "/reviews/the-century-of-the-self"
          , viewLink "/reviews/public-opinion"
          , viewLink "/reviews/shah-of-shahs"
          ]
      ]
  }


viewLink : String -> Html msg
viewLink path =
  li [] [ a [ href path ] [ text path ] ]

根据@pdamoc 的回答进行编辑。我正在尝试使用 elm-live 来编译和显示 elm 文件。我在 Ubuntu 18.04.5 LTS，npm 版本 6.14.9，节点版本 v8.10.0.

我使用 elm-live 得到这个错误：

$ elm-live src/Main.elm --pushstate
events.js:239
    throw new TypeError('"listener" argument must be a function');
    ^

TypeError: "listener" argument must be a function
    at _addListener (events.js:239:11)
    at Server.addListener (events.js:297:10)
    at new Server (_http_server.js:269:10)
    at Object.createServer (http.js:34:10)
    at model (/usr/local/lib/node_modules/elm-live/lib/src/start.js:259:75)
    at /usr/local/lib/node_modules/elm-live/node_modules/crocks/core/compose.js:8:14
    at settle (/usr/local/lib/node_modules/elm-live/node_modules/crocks/Async/index.js:151:16)
    at /usr/local/lib/node_modules/elm-live/node_modules/crocks/Async/index.js:27:62
    at fork (/usr/local/lib/node_modules/elm-live/node_modules/crocks/Async/index.js:155:20)
    at /usr/local/lib/node_modules/elm-live/node_modules/crocks/Async/index.js:224:16

Answer 1

您需要一个网络服务器来为请求的每个路径上的 index.html 提供服务。最简单的方法是全局安装 elm-live 然后像 elm-live src/Main.elm --pushstate

一样启动它

如果不在每个路径上提供 index.html（假设您使用 live-server），如果您导航到内部路径并重新加载，您将获得 404。

榆树浏览器应用程序不显示

Elm browser application not displaying

elm