如何在 Nuxt 中设置 netlify 表单

Posted 2023-02-22

【中文标题】如何在 Nuxt 中设置 netlify 表单

【英文标题】：How to setup a netlify form in Nuxt

【发布时间】：2021-08-01 08:05:45

【问题描述】：

当我使用 vue-router 通过添加带有 <router-link> 元素的链接导航到表单时，该表单不起作用。当我点击提交时，我得到一个 404 响应。

但是，如果我使用 <a> 标记导航到它（触发页面重新加载），那么它可以完美运行。

我怀疑这与作为 SPA 的页面呈现有关，并且出于某种原因，除非重新加载表单页面，否则不会为 Netlify 加载表单的重要部分？为什么会发生这种情况，是否有一个优雅的解决方案？我可以用标签替换所有指向表单的链接，但我确信有更好的解决方案，我只是不太了解问题，无法找到它。

对于上下文，我使用的是 Nuxt。表单在后端被 Netlify 识别，并且可以接受带有标签链接的提交，所以这不是问题。

【问题讨论】：

看这个：***.com/a/62287223/14945696

【参考方案1】：

由于您使用的是 Nuxt，您可能应该使用全静态（可托管在类似 Netlify 的平台上）或使用 target: server（可托管在类似 Heroku 的平台上），但在任何时候，您都应该使用 s-s-r: true（默认价值）。当你有了这个，最重要的部分就完成了。

在 Nuxt 中，您应该使用 <nuxt-link> 而不是 <router-link>，它的工作原理完全相同（采用相同的参数等），但它更具体地适用于 Nuxt 和 s-s-r 兼容，而 <router-link> 不兼容。更多细节在这里：https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component

所以，有了这一切，它应该已经很好用了。如果不是，如果您有 github 存储库，我很乐意帮助您发现问题。

---

另一种解决方案是使用不依赖任何 s-s-r 的表单，例如 Formspree：https://formspree.io/（适用于任何 SPA）

效果很好，非常简单。不过既然你用的是 Nuxt，我宁愿请你做一个合适的 s-s-r 表格。

---

PS：仅对外部链接使用<a> 标签，也就是那些不以您的域名开头的链接，仅此而已。关注这种链接就像是一次硬刷新，应该不惜一切代价避免。

---

编辑：如何通过清理缓存进行部署。

---

编辑如何实现工作形式：

<template>
  <div>
    <form
      netlify
      action="/"
      method="POST"
      name="Contact"
    >
      <input type="hidden" name="form-name" value="Contact" />
      <!-- ... -->
    </form>
  </div>
</template>

如in the docs所说：

[...] 注入一个名为 form-name [...] 的隐藏输入，并且隐藏的 form-name 输入的值与表单的 name 属性匹配

工作正常。可以添加一个蜜罐，使其更加安全！

【讨论】：

非常感谢您的回答！不幸的是，它已经设置为 target:static 和 sr:true 了。我最初也使用 但它也不起作用。这真的让我很困惑，因为我在其他有效的 Nuxt 项目中使用了带有 Netlify 的表单。由于它是私有的，因此我无法共享该存储库，但是还有什么我应该检查的或我应该共享的代码吗？再次感谢您！

嗯，我最近没有在 Nuxt 上添加 netlify 表单，可能会在接下来的几个小时/几天内完成。但是您可以检查您的表单实际上是否由后端正确生成（为此禁用 JS）。检查是否没有构建缓存问题（曾经使用 Netlify，图像已添加到我的答案中）。仔细检查您的表单上是否有data-netlify="true"，并且可能还添加一个蜜罐字段：docs.netlify.com/forms/spam-filters/#honeypot-field 如果它仍然无法正常工作，我猜您可以创建一个新项目并尝试发现每一个细微差别。一个小错字或类似的 IMO。

您好！我一直在让自己发疯，试图在没有运气的情况下解决这个问题。正如您所建议的，我尝试制作一个新项目来发现差异，但即使该项目现在也无法正常工作。您是否有机会查看此测试存储库并让我知道您是否发现有任何损坏？这一定很明显，我只是盯着太久了。 github.com/John-Church/test

再次感谢您的帮助。添加隐藏字段为我修复了它。但是，让我感到困惑的是，我似乎不小心遗漏了其他网站上的隐藏字段，而表单仍然有效？另外，当触发页面刷新时，为什么它们会在没有隐藏字段的情况下工作？