Gatsby-srr或浏览器，可在webpack babel之后注入html（确实是vue）

Question

我正在使用snipcart，它查看静态html文档并寻找#snipcart元素。您可以在其中放置vue元素，魔术将在snipcart.js端完成。

使用Gatsby时，要编辑index.html文件，必须创建一个名为html.js的React文件。在此文件中，我可以成功添加Snipcart，一切正常。直到我要自定义购物车，并且Snipcart为此使用了vue。您必须在#snipcart div之间添加Vue项。

snipcart-docs-customization

一个例子

<div hidden id="snipcart" data-api-key="<API_KEY>">
    <component-to-override>
        <div class="root">
          {{ vue_variable.itemText }}
        </div>
    </component-to-override>
</div>

问题是，如果我添加vue，webpack将抛出错误。这是有道理的。因此，盖茨比（Gatsby）有几个不错的中间件类型API的gatsby-ssr和gatsby-browser可能会对此有所帮助。

看着这些API，我仍然不确定如何执行此操作。我需要在Gatsby渲染静态页面时将此代码添加到index.html中，至少我觉得这是最好的。

因为Snipcart在#snipcart divs innerHTML中查找vue格式的组件，所以这很困难，因为webpack想要转换vue，我不希望转换。

我该怎么办？

我招待过的一些有用的链接： Gatsby Lifecyle Gatsby-ssr api Gatsby-browser api Snipcart customizing components