Heim  >  Fragen und Antworten  >  Hauptteil

Verwenden Sie das Netlify-Formular, um 404 zu erhalten (VueJs 3 + Vite + VueRouter + Netlify)

<p>我的 ContactView.vue 页面中有此表单 <code>src/views/ContactView.vue</code> :: 我想重定向到自定义页面, 感谢消息 <code>src/views/SuccessView.vue</code></p> <pre class="brush:php;toolbar:false;"><form name="contact-form" action="/success" method="POST" data-netlify="true" data-netlify-honeypot="bot-field"> <Eingabetyp="versteckt" name="Kontaktformular" value="Kontaktformular" /> <div class="grid md:grid-cols-2 md:gap-6"> <div class="relative z-0 w-full mb-6 group"> <Eingabetyp="Text" name="vorname" 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 aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich /> <label for="vorname" 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"> <Eingabetyp="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 aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich /> <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"> <Eingabetyp="E-Mail" 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 aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich /> <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">E-Mail Adresse</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 aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich /> <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">Ihre Nachricht</label> </div> <button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-mediumrounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Senden</button> </form></pre> <p>Ich habe alle Anleitungen dort und in verwandten Foren befolgt, aber niemand konnte mir helfen. </p> <p>Ich habe diesen Artikel gelesen, aber er scheint bei mir nicht zu funktionieren. </p> <p>Die meisten Leitfäden und Tutorials erwähnen exakte HTML-Klone als Skelette im „öffentlichen“ HTML, also habe ich in index.html etwas Ähnliches gemacht</p> <pre class="brush:php;toolbar:false;"><body> "form netlify-honeypot="bot-field" <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></pre> <p>Wenn ich versuche, das Formular in <code>random-netlify-name-784120.netlify.app</code> auszufüllen, wird unmittelbar nach dem Ausfüllen ein schwarzer Bildschirm mit dieser Antwort angezeigt. < /p> <p>Wie sorge ich dafür, dass alles reibungslos läuft? </p>
P粉564301782P粉564301782412 Tage vor425

Antworte allen(1)Ich werde antworten

  • P粉470645222

    P粉4706452222023-09-03 10:33:53

    你成功了吗? 我遇到了类似的问题,只能通过删除 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'),
          },
        }

    Antwort
    0
  • StornierenAntwort