nuxt 如何让制作404
时间: 2023-08-18 10:34:18 浏览: 132
在 Nuxt.js 中,你可以通过创建 `layouts/error.vue` 文件来自定义 404 页面的样式和内容。这个文件会作为错误页面的布局文件,当页面出现错误时,Nuxt.js 会将错误信息传递给这个布局文件来渲染错误页面。
你可以这样创建 `layouts/error.vue` 文件:
```html
<template>
<div class="error-page">
<h1>404</h1>
<p>这个页面不存在</p>
</div>
</template>
<style>
.error-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
font-size: 6rem;
}
p {
font-size: 2rem;
margin-top: 2rem;
}
</style>
```
这个文件中的内容可以根据你的需求来自定义,例如你可以添加一个返回首页的按钮等。当然,你也可以在 `layouts/error.vue` 文件中使用 Nuxt.js 提供的错误信息对象来获取更详细的错误信息,例如:
```html
<template>
<div class="error-page">
<h1>{{ error.statusCode }}</h1>
<p>{{ error.message }}</p>
</div>
</template>
```
最后,记得在 `nuxt.config.js` 文件中添加 `generate: { fallback: true }` 配置,以便在使用 `nuxt generate` 命令生成静态文件时,能够正确地处理 404 页面。
阅读全文