vue 打包部署nginx,刷新页面空白或404,js报错

今天老板心血来潮,准备部署一版连雏形还没有的项目给甲方爸爸看看,遂停下手中的活,切换生产环境,所有代码缕一缕,尽量做到页面好(bu)看(diu)些(ren),打包交给运维部署。

然后就在测试过程中,发现两个问题,一级页刷新会报404,二级页刷新js报错页面空白。

由于这次和公司一个老前端合作开发,趋于压力,自己之前搭的一套vue框架不能用了,老前端大哥必须自己架构(没有实际vue开发经验),遂在网上找了一个框架,结构混乱,拼凑感明显,但是也懒得说了,用呗,就是白瞎了vue ui这么好用的可视化工具。抱着最后肯定会出问题的心理推进开发工作,果不其然,上述问题出现了,大哥解决不了。运维跟群里说我之前自己开发的那两个项目都没有出现过这种问题,然后就顺理成章地让我解决这次的问题。来吧

之前自己搞的项目都是默认的hash模式,查了一下资料history模式就是会出现很多问题,所以贴出来加深一下印象

  • 一级页刷新报404

这个问题是在官网找到答案的,404时,设置重定向到index.html,几种部署方式都有例子。

原文链接:https://router.vuejs.org/zh/guide/essentials/history-mode.htm

vue 打包部署nginx,刷新页面空白或404,js报错_第1张图片

 

  • 二级路由刷新js报错,页面空白

修改图示位置,默认所有静态资源从根目录开始找

vue 打包部署nginx,刷新页面空白或404,js报错_第2张图片

 

你可能感兴趣的:(vue,vue,history模式,vue,webpack)