nuxt静态部署 layouts/error.vue配置问题

实现效果:根据官网建立layouts/error.vue文件,目的,在用户输入路由错误(即非router配置的路由)时,响应一个错误的提示页面而不是使用浏览器报错的形式,如:输入 /a(a页面不存在) 能跳转到error页面  !

问题:官网只提到了创建error及内容编写,当你在开发环境(npm run dev)运行时输入错误页面能定到error页面,没有问题。但是,注意了,当使用npm run generate静态打包后,在进行相同操作,你会发现error并没有定到(即是浏览器报错),在生成的包文件夹下你会发现没有404的页面(正确的配置error打包后会生成404.html);然后就是我疯狂的查官网和别的大神资料,然后都是用的官网文档一笔带过(也不晓得他们测没得,还是说都是用的服务端部署),注:前面提到服务端部署,这里我就提一下原因,npm run dev和服务端部署其实是同样的环境(就是npm run dev也是服务端部署),所以你会发现这两个都能正常定向到error页面,但是静态部署是静态托管,是另一种模式。所以你打包后会发现开发环境定向错误页面,但是打包后就定不到而是浏览器报错了;

花了几天时间查官网查大神,都是一笔带过,个人的犟脾气就上来了,于是就去官网的git上把他们官网的demo下下来查,多次测试后发现是nuxt.config.js中的generate需要进行配置才能使静态部署的error打包成功,官方文档并没有解释参数对这个起作用(这也是让我懵逼的巨大bug很讨厌),generate: {

    fallback: true, // 在将生成的站点部署到静态主机时,可以使用此文件。它将回退到模式:mode:'spa'。 主要是这个api的作用 打包生产404

    interval: 150 //两个渲染周期之间的间隔,以避免使用来自Web应用程序的API调用互相干扰。 建议加这个是因为error里面官网会叫你引入props:["error"],这个时间间隔便是避免跳转后传值造成api冲突 我测试150是所有页面通过(之前设置100基本通过但是有一个页面始终报错白屏,也是纠结了好久,个人有个写代码的坏习惯:明明同样的代码页面引入方式一模一样,就是别的都能过唯独一个不过,就不会想配置代码问题(框架原理),总是会在这样的情况卡很久,难受)

  }


设置这generate两个参数后,再打包进文件夹会发现多了个404页面,启动服务器(dist下http-server)运行就能进入404错误页面了,剩下bug如白屏就是上述问题及代码问题了;

以上,特此记录,防止以后忘记又掉坑里,

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 为了提升网站的访问速度,需要尽可能的减少客户端与服务器端的请求数量与传输的数据量以及服务器从硬盘或数据库读取内容的...
    木白no1阅读 11,146评论 0 4
  • 当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simp...
    饥人谷_Leonardo阅读 39,712评论 0 5
  • 本文是直接着手SSR部分的并通过实战讲述自己遇到的一些问题和方案,需要大家有一定的React,node和webpa...
    Shinemax阅读 8,783评论 0 6
  • 两情相悦,无论结局是喜是悲,都很美好,只是没那么容易。 杜牧喜欢张好好:“娉娉袅袅十三余,豆蔻梢头二月初。春风十里...
    臻爱778阅读 3,349评论 0 4
  • “肉肉”终于走了,跟她妈妈一起去看她的爸爸,去她那向往的草原、沙漠、蓝天、白云。绿色的大草原再加上奔驰的骏马,让心...
    熊112266阅读 3,173评论 0 0

友情链接更多精彩内容