3

我认为这不是Serving Polymer App to a /path not at root的副本，因为它是关于 Polymer-cli 版本 1.8 和 Polymer 3 的较新版本

我创建了一个非常简单的组件，当从根路径提供服务时，它可以与“polymer serve”和“polymer build”一起使用。

根据文档，您可以使用 --base-path 构建选项为非根路径构建应用程序。但是，这似乎不适用于所有资源

示例项目在 github https://github.com/anneb/polymer-simple-component/

基础知识：

索引.html

<!doctype html>
<html lang="en">
  <head>
    <title>Simple Polymer app</title>
    <base href="/">
  </head>
  <body>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>    
    <script type="module" src="src/components/simple-component.js"></script>
    <simple-component></simple-component>
  </body>
</html>

相对引用 ../../images/spinner.gif 的简单组件：

import {LitElement, html} from '@polymer/lit-element';
class SimpleComponent extends LitElement {
  _render() {
    return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;
  }
}
customElements.define('simple-component', SimpleComponent);

如果使用测试，上述工作（微调器可见）

polymer serve

和

polymer build

但是，当使用以下内容构建时：

polymer build --name es5-bundled --base-path es5-bundled

您现在可以从构建目录（build/es5-bundled 的父级）提供 es5-bundled，并且代码现在主要使用路径 /es5-bundled/，但仍需要在 /images/spinner.gif 处引用引用的 spinner.gif，为什么？

我的聚合物.json：

{
    "entrypoint": "index.html",
    "shell": "src/components/simple-component.js",
    "sources": [
      "images/**/*"
    ],
    "extraDependencies": [
      "node_modules/@webcomponents/webcomponentsjs/**"
    ],
    "builds": [
      {
        "name": "es5-bundled",
        "js": {
          "compile": "es5",
          "minify": true,
          "transformModulesToAmd": true
        },
        "css": {
          "minify": true
        },
        "html": {
          "minify": true
        },
        "bundle": true,
        "addServiceWorker": true
      }
    ],
    "moduleResolution": "node",
    "npm": true
}
4

1 回答 1

1

示例组件使用相对路径：

return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;

这可以使用模块 URL 来改进import.meta.url，如下所示：

return html`<div>
  <img src$="${new URL('../../images/spinner.gif', import.meta.url).href}" alt="Spinner">
  </div>`;

例如import.meta.urlFirefox 不支持，您必须polymer build使用选项--js-transform-import-meta：

polymer build --name es5-bundled --build-path es5-bundled --js-transform-import-meta

另一个import.meta.url适用于单页应用程序的解决方法是：

return html`<div>
  <img src$="${this.baseURI}/images/spinner.gif" alt="Spinner">
  </div>`;
于 2018-08-20T12:28:43.240 回答