使用 netlify 形式取得 404(VueJs 3 + Vite + VueRouter + Netlify)
P粉564301782
2023-09-02 15:59:41
<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" datat; -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-fullorder text-sm text-gray-900 btext-fullorder -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 -ginz-10 originz-10 originz -[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-smorder text-gray-900 b-transparent bx-order -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=「相對z-0 w-full mb-6組」>
<輸入類型=“電子郵件”姓名=“電子郵件” id="floating_email"; class=”block py-2.5 px-0 w-full text-sm text-gray-900 bg-透明邊框-0 border-b-2 border-pine 外觀-none focus:outline-none focus:ring-0 focus :邊界-泡泡糖同行”佔位符=” 」必填>>
<標籤=“電子郵件”類別=“對等焦點:字體中絕對文字-sm文字灰色-500持續時間-300變換-翻譯-y-6縮放-75頂部-3-z-10原點-[0]對等焦點:左-0peer -focus:text-bubblegumpeer-placeholder-shown:scale-100peer-placeholder-shown:translate-y-0peer-focus:scale-75peer-focus:-translate-y-6>>電子郵件地址標籤>
<div class=「相對z-0 w-full mb-6組」>
;
<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></pre>
<p>我遵循了那裡和相關論壇上的所有指南,但沒有人可以幫助我。 </p>
<p>我讀過這篇文章,但似乎它對我不起作用。 </p>
<p>大多數指南和教程都提到將精確的 HTML 克隆作為「公共」HTML 中的骨架,因此在 index.html 中我做了一些類似的事情</p>
<pre class="brush:php;toolbar:false;"><body>
<form netlify netlify-honeypot="bot-field" hidden name="contact-form" value="contact-form" method="POST" action="""
<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>當我在填寫表單後立即嘗試在 <code>random-netlify-name-784120.netlify.app</code> 中填寫表單時,我會看到黑屏並顯示此回應。 < /p>
<p>如何讓一切順利進行? </p>
你成功了嗎? 我遇到了類似的問題,只能透過刪除
action='/success/'
參數並讓 Netlify 重定向到它自己的頁面來解決...自訂 ajax 也不起作用,因為對
'/'
的提取返回 404...仍然在自訂頁面或自訂處理程序上運行......如果我找到一些東西,我會發回來。
(我正在使用 Vite React Netlify)沒有路由器套件... 我能夠在我的
中獲得一個vite.config.ts
pages/success
頁面