vue发布到nginx下访问资源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