1

我正在使用 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，我仍然不确定如何做到这一点。我需要将此代码添加到 index.html 中，因为 Gatsby 正在渲染静态页面，至少我觉得这是最好的。

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

我该怎么办？

我接受了一些有用的链接： Gatsby Lifecyle Gatsby-ssr api Gatsby-browser api Snipcart customizing components

4

0 回答 0