Gunakan borang netlify untuk mendapatkan 404 (VueJs 3 + Vite + VueRouter + Netlify)

Question

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

<form name="contact-form" tindakan="/berjaya" kaedah="POST" data-netlify="benar" data-netlify-honeypot="bot-field">
              <jenis input="tersembunyi" name="borang hubungan" value="borang hubungan" />
              <div class="grid md:grid-cols-2 md:gap-6">
                <kelas div="relatif z-0 w-kumpulan mb-6 penuh">
                    <jenis input="teks" name="nama_pertama" id="floating_first_name" class="sekat py-2.5 px-0 w-teks penuh-sm teks-kelabu-900 bg-sempadan lutsinar-0 sempadan-b-2 sempadan-penampilan pain-tiada fokus:garis besar-tiada fokus:fokus cincin-0 :sempadan-bubblegum rakan sebaya" pemegang tempat=" " diperlukan />
                    <label untuk="nama_pertama" class="peer-focus:font-medium absolute text-sm text-grey-500 duration-300 transform -terjemah-y-6 skala-75 atas-3 -z-10 asal-[0] rakan-fokus:kiri -0 fokus rakan sebaya:teks-bubblegum pemegang tempat rakan sebaya-ditunjukkan:skala-100 pemegang tempat rakan sebaya-ditunjukkan:terjemah-y-0 fokus rakan sebaya:skala-75 fokus rakan sebaya:-terjemah-y-6">Pertama nama</label>
                </div>
                <kelas div="relatif z-0 w-kumpulan mb-6 penuh">
                    <jenis input="teks" name="last_name" id="nama_akhir_terapung" class="sekat py-2.5 px-0 w-teks penuh-sm teks-kelabu-900 bg-sempadan lutsinar-0 sempadan-b-2 sempadan-penampilan pain-tiada fokus:garis besar-tiada fokus:fokus cincin-0 :sempadan-bubblegum rakan sebaya" pemegang tempat=" " diperlukan />
                    <label untuk="last_name" class="peer-focus:font-medium absolute text-sm text-grey-500 duration-300 transform -terjemah-y-6 skala-75 atas-3 -z-10 asal-[0] rakan-fokus:kiri -0 fokus rakan sebaya:teks-bubblegum peer-placeholder-ditunjukkan:skala-100 peer-placeholder-ditunjukkan:terjemah-y-0 fokus rakan sebaya:skala-75 fokus rakan sebaya:-terjemah-y-6">Terakhir nama</label>
                </div>
              </div>
              <kelas div="relatif z-0 w-kumpulan mb-6 penuh">
                  <jenis input="e-mel" nama="e-mel" id="e-mel_terapung" class="sekat py-2.5 px-0 w-teks penuh-sm teks-kelabu-900 bg-sempadan lutsinar-0 sempadan-b-2 sempadan-penampilan pain-tiada fokus:garis besar-tiada fokus:fokus cincin-0 :sempadan-bubblegum rakan sebaya" pemegang tempat=" " diperlukan />
                  <label untuk="e-mel" class="peer-focus:font-medium absolute text-sm text-grey-500 duration-300 transform -terjemah-y-6 skala-75 atas-3 -z-10 asal-[0] rakan-fokus:kiri -0 peer-focus:teks-bubblegum peer-placeholder-ditunjukkan:skala-100 peer-placeholder-ditunjukkan:terjemah-y-0 peer-focus:skala-75 peer-focus:-terjemah-y-6">E-mel alamat</label>
              </div>

              <kelas div="relatif z-0 w-kumpulan mb-6 penuh">
                  <jenis textarea="teks" name="textarea" id="kawasan_luar_terapung" class="sekat py-2.5 px-0 w-teks penuh-sm teks-kelabu-900 bg-sempadan lutsinar-0 sempadan-b-2 sempadan-penampilan pain-tiada fokus:garis besar-tiada fokus:fokus cincin-0 :sempadan-bubblegum rakan sebaya" pemegang tempat=" " diperlukan />
                  <label untuk="textarea" class="peer-focus:font-medium absolute text-sm text-grey-500 duration-300 transform -terjemah-y-6 skala-75 atas-3 -z-10 asal-[0] rakan-fokus:kiri -0 peer-focus:text-bubblegum peer-placeholder-ditunjukkan:skala-100 peer-placeholder-ditunjukkan:terjemah-y-0 peer-focus:skala-75 peer-focus:-terjemah-y-6">Anda Mesej</label>
              </div>

              <jenis butang="serahkan" kelas="teks-putih bg-bubblegum hover:bg-ceri fokus:ring-4 fokus:garis-tiada fokus:cincin-kapas-gula-gula fon-medium bulat-lg teks-sm w-full sm:w-auto px-5 py-2.5 text-center">Serah</button>
            </form>

Saya mengikuti semua panduan di sana dan di forum berkaitan tetapi tiada siapa yang dapat membantu saya.

Saya membaca artikel ini tetapi ia nampaknya tidak berkesan untuk saya.

Kebanyakan panduan dan tutorial menyebut klon HTML tepat sebagai rangka dalam HTML "awam", jadi dalam index.html saya melakukan sesuatu yang serupa

<body>
    <bentuk netlify-honeypot="bot-field"nama tersembunyi="contact-form"
      <jenis input="teks"
      <jenis input="teks"
      <jenis input="emel"nama="e-mel"
      <textarea name="textarea"></textarea>
      <jenis butang="serahkan"></button>
    </form>
    <div id="app"></div>

    <jenis skrip="modul" src="/src/main.js"></script>
  </body>

Apabila saya cuba mengisi borang dalam random-netlify-name-784120.netlify.app serta-merta selepas mengisinya, saya melihat skrin hitam dengan respons ini. < /p>

Bagaimanakah saya boleh menjadikan semuanya berjalan lancar?

Answer 1

Adakah anda berjaya? Saya mempunyai masalah yang sama dan hanya boleh menyelesaikannya dengan mengalih keluar parameter action='/success/' dan membiarkan Netlify mengubah hala ke halamannya sendiri...

Ajax tersuai juga tidak berfungsi kerana pengambilan untuk '/' mengembalikan 404...

Masih berjalan pada halaman tersuai atau pengendali tersuai...jika saya menjumpai sesuatu saya akan siarkan semula.

(Saya menggunakan Vite + React + Netlify) Tiada pakej penghala... Saya boleh mendapatkan halaman pages/success dalam vite.config.ts sayavite.config.ts

中获得一个 pages/success

build: {
    ...,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        success: resolve(root, 'pages', 'success', 'index.html'),
      },
    }