标签：vue 访问 nginx token 404 白屏 直接 路由

这里先说404问题，比较简单就是vue中路由mode的问题
如果不嫌弃地址有#号的话就改成默认hash或者直接将这个属性删了就行，删了直接使用默认

如果说不想地址有#的话配置下nginx即可
nginx配置

try_files $uri $uri/ /index.html;

如果以上已解决您的问题可以不在往下看了，下面只是记录自己的一个踩坑过程，避免以后再犯
我的路由一直是使用的是 history ，没有配置nginx所以有了很多问题
先描述以下错误症状，
一开始发布到nginx下能访问，但是访问一会就访问不了了，很奇怪。
切换端口后就又能访问了，以为问题解决，可是我还是太年轻。一会就又不行了
在我感觉这是一个玄学问题时，我发现每次登录完之后在打开新页签在访问就直接白屏，
回头一想，每次登录是不是做了什么操作，哎，突然相当登录成功给浏览器添加了一个token，会不会是它搞得鬼。
果然将浏览器的token删掉的话访问成功。（有点让人摸不着头皮）
而且token有值才行，如果通过localStorage.getItem()，拿到的是空也没事可以正常访问，下面给出截图

这就有点线索了，排查哪里用到了token
我这里定义了一个公用的key，所以将这个key注释掉看一下哪里报错

重新打包发布
发现没报错，但还是白屏，wtf

在想一下，既然没有报错那肯定直接用的那个key的值

那继续配置以下哪里用到了这个，最后锁定到路由那里，因为路由里偷了个懒，没有引入这个公用的js，直接手写了这个值

之后呢我们将段路由守卫的代码先去掉，看看是否可以访问成功
很好，访问页面还是白屏，我非常开心

再想一下，为什么token对应的值是null，或者没有token会能访问到资源呢，我们再看一下路由页面的代码逻辑吧，碰碰运气
注意这里的条件，如果我们直接next()看看会不会访问成功

直接next()，这里访问页面成功了，不容易总算看到点希望

又思考了以下为什么next能直接访问页面，而我注释掉了就不行，最后发现
next可能是vue的路由起作用直接给你往下转发了，应该是这样，但是访问其它路径404直接
这可能因为我现在使用的路由还是history模式没有配置nginx里的路径，所以可能会导致白屏
最后问题找到了，还有一些细节就不列了，
我们将nginx按照我嘴上边的配置好，访问成功，问题解决。

标签：vue,访问,nginx,token,404,白屏,直接,路由
来源： https://blog.csdn.net/liulang1905/article/details/117929863

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。