使用 netlify 形式获取 404(VueJs 3 + Vite + VueRouter + Netlify)
P粉564301782
P粉564301782 2023-09-02 15:59:41
[Vue.js讨论组]

我的 ContactView.vue 页面中有此表单 src/views/ContactView.vue : 我想重定向到自定义页面,感谢消息 src/views/SuccessView.vue

<form name="contact-form" action="/success" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
              <input type="hidden" name="contact-form" value="contact-form" />
              <div class="grid md:grid-cols-2 md:gap-6">
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="first_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">First name</label>
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="last_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last name</label>
                </div>
              </div>
              <div class="relative z-0 w-full mb-6 group">
                  <input type="email" name="email" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="email" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email address</label>
              </div>

              <div class="relative z-0 w-full mb-6 group">
                  <textarea type="text" name="textarea" id="floating_ext_area" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="textarea" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Your Message</label>
              </div>

              <button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
            </form>

我遵循了那里和相关论坛上的所有指南,但没有人可以帮助我。

我读过这篇文章,但似乎它对我不起作用。

大多数指南和教程都提到将精确的 HTML 克隆作为“公共”HTML 中的骨架,因此在 index.html 中我做了一些类似的事情

<body>
    <form netlify netlify-honeypot="bot-field" hidden name="contact-form" value="contact-form" method="POST" action="/success" >
      <input type="text" name="first_name" />
      <input type="text" name="last_name" />
      <input type="email" name="email" />
      <textarea name="textarea"></textarea>
      <button type="submit"></button>
    </form>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>

当我在填写表单后立即尝试在 random-netlify-name-784120.netlify.app 中填写表单时,我会看到黑屏并显示此响应。< /p>

如何才能让一切顺利进行?

P粉564301782
P粉564301782

全部回复(1)
P粉470645222

你成功了吗? 我遇到了类似的问题,只能通过删除 action='/success/' 参数并让 Netlify 重定向到它自己的页面来解决...

自定义 ajax 也不起作用,因为对 '/' 的提取返回 404...

仍然在自定义页面或自定义处理程序上运行......如果我找到一些东西,我会发回来。

(我正在使用 Vite + React + Netlify)没有路由器包... 我能够在我的 vite.config.ts

中获得一个 pages/success 页面
build: {
    ...,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        success: resolve(root, 'pages', 'success', 'index.html'),
      },
    }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号