Question

我正在使用Yeoman聚合物发生器制作一个网络应用程序（学校方面项目），一切都很顺利。

每当我运行“grunt serve”时，网站都会构建并显示在localhost服务器上。一切都很好。

但是，当我在普通的HTTP服务器上运行它时（我已尝试使用Apache和内置的Python），我的SASS样式表和iframe未被使用，正如您在下面链接的图片中所看到的那样。

我在Chrome中使用了元素检查器，iframe确实已加载，但未显示。

咕噜：

HTTP：

我的index.html来源：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TriMath</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <!-- endbuild -->

  <!-- build:vulcanized elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endbuild-->

  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body unresolved fullbleed>

<template is="auto-binding" id="t">

  <!-- Route controller. -->
  <flatiron-director route="{{route}}" autoHash></flatiron-director>

  <core-scaffold id="scaffold">

    <!-- Drawer -->
    <nav>
      <core-toolbar horizontal center-justified layout>
        <span>TriMath</span>
        <paper-fab icon="launch" id="sourceButton" onclick="window.open('https://github.com/theSilentStorm/TriMath','_blank');"></paper-fab>
      </core-toolbar>
      <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}" on-core-select="{{menuItemSelected}}">
        <template repeat="{{page, i in pages}}">
          <paper-item hash="{{page.hash}}" noink>
            <core-icon icon="label{{route != page.hash ? '-outline' : ''}}" id="drawerIcon"></core-icon>
            <a href="#{{page.hash}}">{{page.name}}</a>
          </paper-item>
        </template>
      </core-menu>
    </nav>

    <!-- Toolbar -->
    <core-toolbar tool flex>
      <div flex>{{selectedPage.page.name}}</div>
        <paper-menu-button>
          <paper-icon-button icon="more-vert" raised></paper-icon-button>
          <paper-dropdown class="dropdown" halign="right">
            <core-menu class="menu">
              <paper-item><a href="about.html">About</a></paper-item>
            </core-menu>
          </paper-dropdown>
        </paper-menu-button>
    </core-toolbar>

    <!-- Content -->
    <div layout horizontal center-center fit>
      <core-animated-pages id="pages" selected="{{route}}" valueattr="hash" transitions="slide-from-right">
        <template repeat="{{page, i in pages}}">
          <section hash="{{page.hash}}" layout vertical center-center>
            <iframe src="{{page.url}}" frameborder="0"><div style:"width: 100%;">Loading...</div></iframe>
          </section>
        </template>
      </core-animated-pages>
    </div>

  </core-scaffold>
</template>


  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

Answer 1

您需要运行grunt来构建发布版本。一切都将进入dist文件夹。然后，您需要告知您的网络服务器提供dist文件夹。

Grunt项目在Apache服务器上无法正常工作

1 个答案: