为什么Elm Build不起作用？走错了路_Build_Elm

为什么Elm Build不起作用？走错了路

build elm

为什么Elm Build不起作用？走错了路,build,elm,Build,Elm,榆树0.19 创建elm应用程序myapp和elm应用程序开始显示徽标和“您的elm应用程序正在工作！” 好自述文件建议构建elm应用程序。这样我就得到了一个带有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 p

榆树0.19

创建elm应用程序myapp

和

elm应用程序开始

显示徽标和

“您的elm应用程序正在工作！”

好

自述文件建议构建elm应用程序。这样我就得到了一个带有

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 side的错误

备选方案：

elm make Main.elm-output=Main.html

将所有js内容都放在html中并不好。

我会避免使用

创建elm应用程序这样的工具。根据我的经验，他们只是让定制和类似的错误更难理解
如果将输出指定为js文件而不是html文件，则elm make将输出js文件：
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>


init（{node:document.getElementById（“app”）}）；
我会避免使用像创建elm应用程序这样的工具。根据我的经验，他们只是让定制和类似的错误更难理解
如果将输出指定为js文件而不是html文件，则elm make将输出js文件：
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>


init（{node:document.getElementById（“app”）}）；
创建elm应用程序
真的可以帮助您快速启动和运行一些像样的东西——我喜欢它
有几个地方引用了路径，在您第一次构建时，您需要根据您想要实现的目标定制一些东西
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 : 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
克隆到images
文件夹中名为：static
的新文件夹中，则可以从根目录和、img[src./static/images/logo.svg][]
中引用原始的[img[src”logo.svg]]
，并在任何位置提供相对路径
现在，elm app build
将指向/logo.svg
和/static/images/logo.svg
，正如main.js
所预期的那样

更详细地说，如果您开始搜索任何不一致之处，以下内容应该会有所帮助：
在README.md
中，有一些关于path变量的关键思想：
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应用程序构建的位置
部署路径：
## 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\u URL%/可能在
和图标元
在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
中，您将看到“源目录”
——如果您计划在不污染工作目录的情况下添加包，这可能会很有用：
   {
    "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
中，您将看到的“开始url”：“/index.html”
和的“src”：“favicon.ico”
：
  `{
  "short_name": "Elm App",
  "name": "Create Elm App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

创建elm应用程序
真的可以帮助你快速启动和运行一些像样的东西——我喜欢它
有几个地方引用了路径，在您第一次构建时，您需要根据您想要实现的目标定制一些东西
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 : 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
克隆到images
文件夹中名为：static
的新文件夹中，则可以从根目录和、img[src./static/images/logo.svg][]
中引用原始的[img[src”logo.svg]]
，并在任何位置提供相对路径
现在，elm app build
将指向/logo.svg
和/static/images/logo.svg
，正如main.js
所预期的那样

更详细地说，如果您开始搜索任何不一致之处，以下内容应该会有所帮助：
在README.md
中，有一些关于path变量的关键思想：
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应用程序构建的位置
部署路径：
## 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\u URL%/可能在
和图标元
在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
中，您将看到“源目录”
——如果您计划在不污染工作目录的情况下添加包，这可能会很有用：
   {
    "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
中，您将看到的“开始url”：“/index.html”
和的“src”：“favicon.ico”
：
  `{
  "short_name": "Elm App",
  "name": "Create Elm App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

不客气。这是一个令人沮丧的问题，无法回答。到目前为止，谢谢。但我仍在努力处理图片（logo.svg），我无法在b之后显示它