vue发布到nginx下访问资源404,或白屏问题

这里先说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按照我嘴上边的配置好,访问成功,问题解决。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue部署到Nginx可以通过以下步骤完成: 1. 首先,确保已经安装了Nginx并启动了Nginx服务。可以使用命令"systemctl start nginx"来启动Nginx服务。 2. 接下来,将Vue项目的打包文件部署到Nginx的默认目录,即"/usr/local/nginx/html"。可以将打包后的文件夹直接复制到该目录下。 3. 然后,编辑Nginx的配置文件"/usr/local/nginx/conf/nginx.conf",找到server段并添加以下配置: ``` server { listen 80; server_name your_domain.com; location / { root /usr/local/nginx/html/your_vue_project; index index.html; try_files $uri $uri/ /index.html; } } ``` 在上述配置中,将"your_domain.com"替换为你的域名或IP地址,将"your_vue_project"替换为你的Vue项目的文件夹名称。 4. 保存并退出配置文件后,重新加载Nginx配置文件以使更改生效,可以使用命令"./nginx -s reload"。 5. 最后,通过访问你的域名或IP地址即可查看部署好的Vue应用。例如,通过访问"http://your_domain.com"或"http://your_ip_address"来验证部署是否成功。 请注意,如果你的Vue应用使用了路由功能,需要添加额外的配置以支持前端路由。具体的配置可以参考Vue官方文档或相关的教程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue(六) Nginx项目部署](https://blog.csdn.net/qq_40772692/article/details/124988974)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue项目部署(Nginx)](https://blog.csdn.net/weixin_42067873/article/details/126704266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值