我从这里复制了HTML，并从这里复制Elm代码。我对Elm代码所做的唯一更改是添加了第一行模块Main公开(..(。我的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
您需要一个Web服务器，为请求的每个路径上的index.html提供服务。最简单的方法是全局安装elm-live，然后像elm-live src/Main.elm --pushstate一样启动它
如果不在每个路径上提供index.html(假设您使用live-server(，如果您导航到内部路径并重新加载，则会得到404。