1

我有这个 stenciljs 组件，它使用这样的 svg 图像：

...
return (
  <button>
    <img src="../../assets/icon.svg"/>
    <slot/>
  </button>
);
...

我的文件夹结构是

src/
    assets/
           icon.svg
    components/
              button/
                     button.tsx

现在，当我这样做时，stencil build它会创建dist包含所有内容的文件夹。

我将 dist 文件夹复制到我的站点中，该站点具有以下结构：

my-web/
       index.html
       bundle/
              <content from dist>

在 index.html 中，我加载了包

<script src="/bundle/my-componets.js"></script>

这按预期工作，但加载的资产/assets/icon.svg不存在（404）。有什么建议我需要做些什么来解决这个问题？

4

2 回答 2

2

我猜有两种方法可以做到这一点。

首先：看看https://stenciljs.com/docs/config#copy。使用此配置设置，您可以将资产（.svg 文件等）复制到 dist 文件夹。您还可以指定要复制到的文件的目标，例如：

copy: [
    { src: "../path/to/the/files", dest: "./path/to/paste/the/files" }
  ],

第二：将资产导入到组件的 JS 中。您需要一个汇总插件来处理导入（例如：rollup-plugin-svg-to-jsx - 但还有其他）。设置此插件后，您可以执行以下操作：

import * as Icon from "path/to/your/svg"

...

return (
  <button>
    <Icon />
    <slot />
  </button>
);

第一个将使您的 JS 包更小一些，并在您将按钮放在页面上的某个位置时加载 Icon.svg 文件。第二个会将 svg 捆绑到您的 JS 中并与您的 JS 一起加载 - 因此在任何时候都没有没有图标的按钮。

于 2019-02-19T07:55:10.970 回答
1

从您打算做的事情来看，我了解您的目标是./dist在构建后在内部拥有完全可运行的独立应用程序。运行应用程序所需的所有源文件都应放置在那里。

这意味着您需要在分发文件夹中创建源文件（静态文件）的副本，my-web/assets/icon.svg以便应用程序找到并访问它。

于 2018-11-20T13:18:53.037 回答