我一直在尝试使用 Polymer 获得一个极其简单的网页,以便在浏览器中简单地呈现 - 我在服务器端使用 Node/ExpressJS/Jade 设置。我的代码与 Polymer 文档附带的示例非常接近,我认为我缺少一些非常简单的东西。我正在使用 Chrome M35。
在服务器上,我已经使用 Bower 安装了所有聚合物材料(平台、核心和纸张),并且已经映射bower_components
静态提供服务/static
app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))
我已经验证我的服务器可以正确提供资源,例如http://localhost:3000/static/paper-button/paper-button.html
– 这将返回所需文件的内容。
该页面提供的 HTML 如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/static/platform/platform.js"></script>
<title>Authenticate</title>
<link rel="import" src="/static/paper-button/paper-button.html">
<style>
body {
font-family: 'Helvetica Neue';
margin: 0;
padding: 24px;
user-select: none;
transform: translateZ(0);
}
paper-button {
margin: 1em;
width: 10em;
}
paper-button.colored {
color: #4285f4;
fill: #4285f4;
}
</style>
</head>
<body>
<paper-button label="Authenticate" class="colored"></paper-button>
</body>
</html>
这与文档中记录的相同小部件的示例非常接近高分子网站 http://www.polymer-project.org/components/paper-button/demo.html。就我而言,没有任何渲染。真正奇怪的是检查器的“网络”选项卡中显示的内容:
有一个Loader.js
脚本,我相信它是通过安装的platform.js
,它发送根页面本身的 XHR(第 3 行)。在我看到的每个其他示例中,加载脚本都会开始加载导入的 Web 组件。我只是不明白为什么在我的例子中会这样做。另一个奇怪的事情是来自Parser.js
– 请求的数据 URL 为data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK
,翻译为://# sourceURL=null/[1453].js
- 再说一遍,这不是一个好兆头。
我尝试过使用相对src
s 在我的链接中 - 无济于事。我基本上陷入了非常早期的阶段,非常感谢能指出正确的方向。