Question

我对ember-cli build选项有问题。以ember s运行服务器时，它会显示包含内容，样式等的正常页面。但是现在我想构建这个应用程序并通过ftp放在我的网站上，所以我尝试了ember build将项目构建到/disk文件夹中，但是index.html文件不包含来自application.hbs + styles/app.css中没有样式。
我是炭烬新手。我究竟做错了什么？灰烬的医生对此一言不发。

Answer 1

您的所有应用实际上都是通过外部资产获取的。

因此，查看您的预建index.html，您会看到类似以下内容的

：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>emberclear</title>

    {{content-for "head"}}

    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
    <link rel="stylesheet" href="{{rootURL}}assets/emberclear.css">


    {{content-for "head-footer"}}
  </head>
  <body class='has-navbar-fixed-top'>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/emberclear.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

我的应用程序是https://emberclear.io，名为emberclear，因此请在适用的地方替换您的应用程序名称。

在head中，我们看到两个link标签。

第一个link适用于您的插件可能包含的所有样式（例如material-ui，bootstrap或bulma）。
第二个link是您的实际应用样式。对我来说，emberclear.css包含app.css中的所有内容及其所有依赖项（我实际上是在使用scss，因此我可以通过scss的@import包含内容）。

在body下方，我们看到两个script标签。

vendor.js将包含ember本身，以及运行时需要包含的所有插件依赖项，例如ember-paper的组件库。
emberclear.js包含您的应用-路线，模板等。

此技术在所有单页应用程序中都很常见，并且并非余烬专有。任何使用react或vue构建的东西都有类似的模式。

如果您想让html和css成为index.html的一部分，那么您可能会对fastboot（https://www.ember-fastboot.com/）+ prember（预渲染的余烬：https://github.com/ef4/prember）感兴趣

希望这会有所帮助！：）

如果出现问题，请随时从dist（可能还有其他文件）中复制您构建的index.html。

根据您遇到的问题为您提供一些后续问题：

您遇到任何错误吗？
当您尝试在本地打开dist / index.html文件时会发生什么？
您要将dist的内容上载到ftp文件夹。这本身很好，但是是否已告知网络服务器将ftp文件夹用于网站？
- 您如何尝试通过浏览器访问ftp文件夹？
- 也许有一个我们可以查看的域/路径来查看其他详细信息？

灰烬：构建时Application.hbs不在体内生成

1 个答案: