Question

我有这个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）。有什么建议可以解决吗？

Answer 1

根据您的意图，我了解您的目标是在构建后在./dist中拥有完全可运行的独立应用程序。运行该应用程序所需的所有源文件都应放置在此处。

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

Answer 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一起加载-因此，随时都有没有Icon的Button。