TL; DR：您需要配置本地路径，并在`Main.elm`

Question

榆木0.19 create-elm-app myapp和elm-app start显示徽标，"Your Elm App is working!" 好。

自述文件建议随后构建elm-app。这样做，我得到了一个带有index.html的构建文件夹。开场什么也没显示。 Crome控制台错误。

src="/static/js/vendors~main.3ca81432.chunk.js" path wrong?
src="static/js/vendors~main.3ca81432.chunk.js" shows the text but not pic (wrong path..)

我做错了还是Elm方面的错误？

替代：elm make Main.elm —output=main.html 将所有js内容放入html中不是很好。

Answer 1

我会避免使用create-elm-app之类的工具。以我的经验，他们只会使自定义和此类错误更加难以理解。

elm make将输出js文件，如果您将输出指定为js文件而不是html文件：

elm make Main.elm —output=main.js

然后您可以通过运行Elm.Main.init在启动Elm的位置创建自己的html文件：

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
    <script>
      Elm.Main.init({node: document.getElementById("app")});
    </script>
  </body>

Answer 2

create-elm-app确实可以帮助您快速启动并运行得体–我喜欢它。

在很多地方都引用了路径，并且在您首次构建时，需要根据您要实现的目标来调整内容。

TL; DR：您需要配置本地路径，并在`Main.elm`

中引用

创建一个名为elmapp.config.js的新文件。

将以下内容粘贴到其中：

/*
More config information here:
https://github.com/halfzebra/create-elm-app/blob/master/template/README.md#overriding-webpack-config
*/

module.exports = {
    homepage: "./" //required to normalise path
}

打开您的src/Main.elm，找到---- VIEW ----块并进行如下调整：

view : Model -> Html Msg
view model =
    div []
        [ img [ src "logo.svg" ] []
        , h1 [] [ text "Your Elm App is working!" ]
        , img [ src "./static/images/logo.svg" ] []
        ]

从路径中删除/是个好主意，因为main.js错误地实例化了此资产。可以将其更改为./，这被解释为绝对路径（相对于环境）。两种语法都一样。

如果您将logo.svg克隆到static文件夹内名为images的新文件夹中，则可以从根目录和{{1 }}，随处都可以使用相对路径。

现在，[ img [ src "logo.svg" ] []将指向, img [ src "./static/images/logo.svg" ] []的{{1}}和elm-app build。

详细一点，如果您开始搜索任何不一致之处，以下内容将有所帮助：

在./logo.svg中，关于路径变量有一些主要想法：

./static/images/logo.svg

您还可以指定要main.js部署路径的位置：

README.md

在哪里进行快速入门更改：

For the project to build, these files must exist with exact filenames: * `public/index.html` is the page template; * `public/favicon.ico` is the icon you see in the browser tab; * `src/index.js` is the JavaScript entry point.可能包含elm-app build ## Changing the base path of the assets in the HTML By default, assets will be linked from the HTML to the root url. For example `/css/style.css`. If you deploy to a path that is not the root, you can change the `PUBLIC_URL` environment variable to properly reference your assets in the compiled assets. For example: `PUBLIC_URL=./ elm-app build`.和图标元。

在index.html中，您会注意到：%PUBLIC_URL%/表示根对象和当前对象：

<link rel="manifest" href="manifest.json">

在src/index.js中，您会看到./ –如果您计划在不污染工作目录的情况下添加软件包，这可能会很有用：

import './main.css';
import { Elm } from './Main.elm';
import registerServiceWorker from './registerServiceWorker';

Elm.Main.init({
  node: document.getElementById('root')
});

registerServiceWorker();

在elm.json中，您也会看到"source-directories"和{ "type": "application", "source-directories": [ "src" ], "elm-version": "0.19.0", "dependencies": { "direct": { "elm/browser": "1.0.0", "elm/core": "1.0.0", "elm/html": "1.0.0", "elm/svg": "1.0.1", "elm/url": "1.0.0", "justgage/tachyons-elm": "4.1.1" }, "indirect": { "elm/json": "1.0.0", "elm/time": "1.0.0", "elm/virtual-dom": "1.0.0" } }, "test-dependencies": { "direct": { "elm-explorations/test": "1.0.0" }, "indirect": { "elm/random": "1.0.0" } } }：

public/manifest.json

为什么Elm Build不起作用？给出错误的路径

2 个答案:

TL; DR：您需要配置本地路径，并在`Main.elm`

在哪里进行快速入门更改：

为什么Elm Build不起作用？给出错误的路径

2 个答案:

TL; DR：您需要配置本地路径，并在Main.elm

在哪里进行快速入门更改：

TL; DR：您需要配置本地路径，并在`Main.elm`