vue发布到nginx下访问资源404,或白屏问题
这里先说404问题,比较简单就是vue中路由mode的问题如果不嫌弃地址有#号的话就改成默认hash或者直接将这个属性删了就行,删了直接使用默认如果说不想地址有#的话配置下nginx即可nginx配置try_files $uri $uri/ /index.html;如果以上已解决您的问题可以不在往下看了,下面只是记录自己的一个踩坑过程,避免以后再犯我的路由一直是使用的是 history ,没有配置
这里先说404问题,比较简单就是vue中路由mode的问题
如果不嫌弃地址有#号的话就改成默认hash或者直接将这个属性删了就行,删了直接使用默认
如果说不想地址有#的话配置下nginx即可
路径是 /conf/nginx.conf
try_files $uri $uri/ /index.html;
如果以上已解决您的问题可以不在往下看了,下面只是记录自己的一个踩坑过程,避免以后再犯
我的路由一直是使用的是 history ,没有配置nginx所以有了很多问题
先描述下错误症状,
一开始发布到nginx下能访问,但是访问一会就访问不了了,很奇怪。
切换端口后就又能访问了,以为问题解决,可是我还是太年轻。一会就又不行了
在我感觉这是一个玄学问题时,我发现每次登录完之后在打开新页签在访问就直接白屏,
回头一想,每次登录是不是做了什么操作,哎,突想到当登录成功给浏览器添加了一个token,会不会是它搞得鬼。
果然将浏览器的token删掉的话访问成功。(有点让人摸不着头皮)
而且token有值才行,如果通过localStorage.getItem(),拿到的是空也没事可以正常访问
这就有点线索了,排查哪里用到了token
我这里定义了一个公用的key,所以将这个key注释掉看一下哪里报错
重新打包发布
发现没报错,但还是白屏,不错
又想了一下,既然没有报错那肯定直接用的那个key的值
那继续排查一下哪里直接get的,最后锁定到路由那里,因为路由里偷了个懒,没有引入这个公用的js,直接手写了这个值
之后呢我们将段路由守卫的代码先去掉,看看是否可以访问成功
很好,访问页面还是白屏,我非常开心
再想一下,为什么token对应的值是null,或者没有token会能访问到资源呢,我们再看一下路由页面的代码逻辑吧,碰碰运气
注意这里的条件,如果我们直接next()看看会不会访问成功
直接next(),这里访问页面成功了,不容易总算看到点希望
又思考了下为什么next能直接访问页面,而我注释掉了就不行,最后发现
next可能是vue的路由起作用直接给你往下转发了,应该是这样。但是访问其它路径404直接
这可能因为我现在使用的路由还是history模式没有配置nginx里的路径,所以可能会导致白屏
最后问题找到了,还有一些细节就不列了,
我们将nginx按照我嘴上边的配置好,访问成功,问题解决。
更多推荐
所有评论(0)