- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我认为这不是 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/
基础知识:
index.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/,但是引用的 spinner.gif 仍然需要在/images/spinner .gif,为什么?
我的 polymer.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
}
最佳答案
示例组件使用相对路径:
return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;
这可能会使用来自 import.meta.url
的模块 URL 进行改进,如下所示:
return html`<div>
<img src$="${new URL('../../images/spinner.gif', import.meta.url).href}" alt="Spinner">
</div>`;
由于 import.meta.url
不受例如 Firefox 的支持,您必须使用选项 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>`;
关于polymer - 为非根路径构建 polymer 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51922404/
我们有几个聚合根,它们有两种主要的识别方法: 一个整数“键”,用作数据库中的主键(并通过引用聚合用作外键)以及应用程序内部的主键,并且无法通过公共(public)网络 API。 基于字符串的“id”,
据我所知,直到 angular 6 ,所有@Ngmodule 提供程序都在根注入(inject)器上注册并在主包中提供服务,即使只有延迟加载的模块使用它们。 唯一的异常(exception)是如果我们
我可以使用 创建文件 File directory = cw.getDir("media", Context.MODE_PRIVATE); //directory.mkdirs(); File b
我正在使用 Mavericks,XCode 5。 我想添加非根 URL 存储库例如svn://sources.xxx.com/xxx/xxx/xxx/xxx 我已经从XCode首选项->帐户尝试过,但
xmllint --xpath "//project" test.xml 失败了 4.0.0 但如果我像这样删除 xmlns 属性,则会成功: 4.0.0
我正在尝试从具有以下结构的深层链接打开 View Controller : # Regular navigation: AppDelegate -> A (root) -> B -> C # Deep
我正在尝试在标签栏内添加一个 Split View,由于 Split View不是 Root View ,因此它无法正确获取旋转通知,因此永远不会调用委托(delegate)的方法来添加按钮到详细 V
我正在关注 this document为我的 gunicorn 服务器设置 Systemd 套接字和服务。 Systemd 将 gunicorn 作为 www-data 启动 gunicorn for
我正在使用 wiringPi2-python 将覆盆子 GPIO 引脚从低电平切换到高电平,然后再切换回来。一切正常,但在它切换 pin 的值后立即抛出 Segmentation fault 并且程序
文档: https://learn.microsoft.com/en-us/graph/api/driveitem-createuploadsession?view=graph-rest-1.0 我可
我是一名优秀的程序员,十分优秀!