uniapp web项目自定义404错误
时间: 2023-08-18 11:06:49 浏览: 87
在 Uniapp 的 Web 项目中,你可以自定义 404 错误页面来提供更好的用户体验。以下是一种实现方法:
1. 在项目的根目录下创建一个名为 `404.html` 的文件,作为自定义的 404 页面。
2. 在 `404.html` 文件中,可以编写自己想要展示的内容,比如一个友好的错误提示信息和返回首页的按钮等。
例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>404 Not Found</title>
<style>
/* 自定义样式 */
body {
text-align: center;
padding: 40px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
.button {
padding: 10px 20px;
background-color: #007aff;
color: #fff;
border-radius: 4px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Oops! 页面找不到了</h1>
<p>抱歉,您访问的页面不存在。</p>
<a href="/">返回首页</a>
</body>
</html>
```
3. 在项目的 `vue.config.js` 文件中添加配置,将 404 请求重定向到自定义页面。
```javascript
module.exports = {
// ...其他配置
devServer: {
// ...
historyApiFallback: true,
// 配置错误页面
proxy: {
'/': {
target: 'http://localhost:8080/404.html',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
}
}
}
```
4. 重新启动项目,访问一个不存在的页面,应该能看到自定义的 404 页面了。
这样就实现了在 Uniapp Web 项目中自定义 404 错误页面。你可以根据自己的需求进行定制化修改。
阅读全文