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如白屏就是上述问题及代码问题了;

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

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