nuxt的Server error解决方案

nuxt的Server error解决方案项目说明nuxt背景说明解决思路：方案调优项目说明项目采用的是vue的技术栈，为了推广到市场利于百度蜘蛛爬虫，项目进行了seo，整体采用nuxt为基础框架。nuxt背景说明nuxt是基于vue的服务端渲染框架，实现SEO的原理是nuxt在服务端先将所有数据请求接受完成后渲染然后在反馈出一个页面，所有当一个请求崩溃时，会导致整个页面崩溃，从而出现nuxt 的

等风ᝰ

4468人浏览 · 2021-05-11 10:08:15

等风ᝰ · 2021-05-11 10:08:15 发布

nuxt的Server error解决方案

项目说明

项目说明

项目采用的是vue的技术栈，为了推广到市场利于百度蜘蛛爬虫，项目进行了seo，整体采用nuxt为基础框架。

nuxt背景说明

nuxt是基于vue的服务端渲染框架，实现SEO的原理是nuxt在服务端先将所有数据请求接受完成后渲染然后在反馈出一个页面，所有当一个请求崩溃时，会导致整个页面崩溃，从而出现nuxt 的Server error的页面
Alt

解决思路：

首先去nuxt的官网，这里提供了一个简单的解决方案，但是此错误页面仅用于浏览器端错误抛出时候使用，比如代码在浏览器端报错时候会进入此页面，服务端报错还是会进入Server error 页面。

然后我们去看官方的issue这里也就是本文的解决方案。

方案

首先我们创建一个跟pages同级的目录app，然后在app下面创建一个目录views，最后在views下创建文件error.html，看下图：

在这里插入图片描述

下面开始码代码：error.html

<!DOCTYPE html>
<html>
<head>
<title>服务奔溃</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name=viewport>
<style>
.__nuxt-error-page{padding: 1rem;background:#f7f8fb;color:#47494e;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}
.__nuxt-error-page .error{max-width:450px}
.__nuxt-error-page .title{font-size:24px;font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}
.__nuxt-error-page .description{color:white;line-height:21px;margin: auto;padding:10px;background-color: #38f;width: 3.75rem;margin-top: 1.875rem;}
.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}
.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}
</style>
<script type="text/javascript">
	function refresh(){
		location.reload()
	}
</script>
</head>
<body>
  <div class="__nuxt-error-page">
    <div class="error">
        <div class="title">您好，由于网络不稳定，导致未显示正确信息，请您点击刷新按钮，即可恢复正常</div>
        <div class="description" onclick="refresh()">刷新</div>
    </div>
    <div class="logo">
      <a href="http://www.test.com/" target="_blank" rel="noopener">test</a>
    </div>
  </div>
</body>
</html>

这里我们将代码部署上去，然后我们在页面可以看到一个这样的页面，然后我们观察url，发现是我们想进的url，刷新一下就能进入到我们要到达的url 在这里插入图片描述
我们点击刷新按钮就可以进入到我们想进入的一个页面

调优

手动刷新太麻烦了，那有没有可以实现自动刷新的功能呢？
答案是有的我们在头部加入

<META HTTP-EQUIV="Refresh" content="1">
<!-- content='1' 表示一秒自动刷新一次 -->

现在的效果

在这里插入图片描述

我们可以看到只要进入这个页面，我们的浏览器就会自动刷新，从而不需要去手动点刷新了

这就是本文一个初步的nuxt的server error解决方案。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^