nuxt3 404页面 如何写

放在根目录下即可 error.vue
版本 nuxt 3.17.7 vue 3.5.17
附赠一份404页面代码

<template><div class="error-container"><div class="error-content"><!-- 404动画数字 --><div class="error-number"><span class="digit">4</span><span class="digit zero">0</span><span class="digit">4</span></div><!-- 错误信息 --><div class="error-message"><h1>页面走丢了</h1><p>抱歉，您访问的页面不存在或已被移除</p></div><!-- 装饰元素 --><div class="decoration"><div class="floating-shapes"><div class="shape shape-1"></div><div class="shape shape-2"></div><div class="shape shape-3"></div><div class="shape shape-4"></div></div></div><!-- 操作按钮 --><div class="error-actions"><button @click="goHome" class="btn-primary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>返回首页</button><button @click="goBack" class="btn-secondary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>返回上页</button></div></div><!-- 背景装饰 --><div class="bg-decoration"><div class="grid-pattern"></div><div class="gradient-orb orb-1"></div><div class="gradient-orb orb-2"></div></div></div>
</template><script setup>
// 页面标题
useHead({title: '404 - 页面未找到'
})// 返回首页
const goHome = () => {navigateTo('/')
}// 返回上一页
const goBack = () => {if (process.client && window.history.length > 1) {window.history.back()} else {navigateTo('/')}
}// 页面加载动画
onMounted(() => {// 添加页面加载完成的类名，触发动画document.querySelector('.error-container')?.classList.add('loaded')
})
</script><style scoped>
.error-container {min-height: 100vh;display: flex;align-items: center;justify-content: center;position: relative;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);overflow: hidden;opacity: 0;animation: fadeIn 0.8s ease-out forwards;
}.error-container.loaded .error-content {animation: slideUp 0.8s ease-out 0.2s forwards;
}@keyframes fadeIn {to {opacity: 1;}
}@keyframes slideUp {from {transform: translateY(30px);opacity: 0;}to {transform: translateY(0);opacity: 1;}
}.error-content {text-align: center;z-index: 10;position: relative;opacity: 0;
}/* 404数字样式 */
.error-number {display: flex;justify-content: center;align-items: center;margin-bottom: 2rem;gap: 0.5rem;
}.digit {font-size: 8rem;font-weight: 900;color: white;text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);animation: bounce 2s infinite;display: inline-block;
}.digit:nth-child(1) {animation-delay: 0s;
}.digit:nth-child(2) {animation-delay: 0.2s;
}.digit:nth-child(3) {animation-delay: 0.4s;
}.zero {position: relative;overflow: hidden;
}.zero::before {content: '';position: absolute;top: 50%;left: 50%;width: 60%;height: 60%;background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);transform: translate(-50%, -50%) rotate(45deg);animation: shine 3s infinite;
}@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-10px);}60% {transform: translateY(-5px);}
}@keyframes shine {0% {transform: translate(-50%, -50%) rotate(45deg) translateX(-200%);}50% {transform: translate(-50%, -50%) rotate(45deg) translateX(200%);}100% {transform: translate(-50%, -50%) rotate(45deg) translateX(-200%);}
}/* 错误信息样式 */
.error-message {margin-bottom: 3rem;
}.error-message h1 {font-size: 2.5rem;font-weight: 700;color: white;margin-bottom: 1rem;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}.error-message p {font-size: 1.2rem;color: rgba(255, 255, 255, 0.9);margin: 0;text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}/* 按钮样式 */
.error-actions {display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;
}.btn-primary,
.btn-secondary {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border: none;border-radius: 50px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;text-decoration: none;position: relative;overflow: hidden;
}.btn-primary {background: rgba(255, 255, 255, 0.2);color: white;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.3);
}.btn-primary:hover {background: rgba(255, 255, 255, 0.3);transform: translateY(-2px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}.btn-secondary {background: transparent;color: white;border: 2px solid rgba(255, 255, 255, 0.5);
}.btn-secondary:hover {background: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.8);transform: translateY(-2px);
}/* 装饰元素 */
.decoration {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
}.floating-shapes {position: relative;width: 100%;height: 100%;
}.shape {position: absolute;border-radius: 50%;background: rgba(255, 255, 255, 0.1);animation: float 6s ease-in-out infinite;
}.shape-1 {width: 80px;height: 80px;top: 20%;left: 10%;animation-delay: 0s;
}.shape-2 {width: 60px;height: 60px;top: 60%;right: 15%;animation-delay: 2s;
}.shape-3 {width: 40px;height: 40px;top: 30%;right: 30%;animation-delay: 4s;
}.shape-4 {width: 100px;height: 100px;bottom: 20%;left: 20%;animation-delay: 1s;
}@keyframes float {0%, 100% {transform: translateY(0px) rotate(0deg);}50% {transform: translateY(-20px) rotate(180deg);}
}/* 背景装饰 */
.bg-decoration {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;
}.grid-pattern {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);background-size: 50px 50px;animation: gridMove 20s linear infinite;
}@keyframes gridMove {0% {transform: translate(0, 0);}100% {transform: translate(50px, 50px);}
}.gradient-orb {position: absolute;border-radius: 50%;filter: blur(40px);animation: orbFloat 8s ease-in-out infinite;
}.orb-1 {width: 300px;height: 300px;background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);top: -150px;left: -150px;animation-delay: 0s;
}.orb-2 {width: 200px;height: 200px;background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);bottom: -100px;right: -100px;animation-delay: 4s;
}@keyframes orbFloat {0%, 100% {transform: translate(0, 0) scale(1);}50% {transform: translate(30px, -30px) scale(1.1);}
}/* 响应式设计 */
@media (max-width: 768px) {.digit {font-size: 5rem;}.error-message h1 {font-size: 2rem;}.error-message p {font-size: 1rem;padding: 0 1rem;}.error-actions {flex-direction: column;align-items: center;padding: 0 1rem;}.btn-primary,.btn-secondary {width: 100%;max-width: 200px;}
}@media (max-width: 480px) {.digit {font-size: 4rem;}.error-message h1 {font-size: 1.5rem;}.shape {display: none;}
}
</style>