Nginx解决Vue路由history模式白屏问题

最新推荐文章于 2024-05-12 13:29:39 发布
最新推荐文章于 2024-05-12 13:29:39 发布
阅读量1.9k 收藏 3
点赞数
文章标签： nginx反向代理 nginx vue.js history
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49639325/article/details/117653498
版权

首先我们把写好的项目放到nginx服务器上，html目录中

当我们vue项目中的路由模式为history时这样会出现白屏问题。

我们解决它将nginx根目录中的conf目录修改nginx.conf文件

找到location，改为：

即可：

softly顾先生
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目使用Nginx解决history路由模式白屏
紫冰的博客
06-07 453
1、首先我们去下载Nginx Nginx 2、写在完成后我们解压到一个文件中。 注意：解压的路径不能有中文 3、我们打开conf文件下面有一个nginx.conf文件，我们需要修改它的配置。 4、找到location / 修改为 location / { root html/dist/; try_files $uri $uri/ /dist/index.html; index index.html;
nginx访问白屏
weixin_34025051的博客
07-11 3040
nginx访问白屏原因：屏置文件有问题，没有解析到代码，检查配置文件 转载于:https://blog.51cto.com/yht1990/2140579
2024年Web前端最新vue去掉路径#nginx相关配置问题，白屏问题(2)，Web前端开发面试基础
最新发布
2401_84411433的博客
05-12 163
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家#存在二级活更多目录，比如http://localhost/document/index/../.. 在这些多级目录页面中刷新页面出现白屏问题。
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 8566
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
nginx配置vue history模式
weixin_34279579的博客
03-15 1599
window下nginx的配置文件如下, linux下同样实用，同时里面还包含了 反响代理配置 和cros请求头配置，负载均衡 配置 只需要在 upstream 中加入多个就可以，如果没有做session共享则需要添加负载策略，如ip_hash #user nobody; worker_processes 1; #error_log logs/error.log; #error_lo...
Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）
Zhoujia1316的博客
06-07 191
第一步:先下载Nginx; 第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的): 第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置： 找到 location / {} 选项,在里面写： ...
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
记录一次nginx转发代理skywalking白屏 以及nginx鉴权配置
chijiansong的博客
03-02 2109
nginx跟后端服务器连接超时时间(代理连接超时)默认60s。#连接成功后，后端服务器响应时间(代理接收超时)默认值。#后端服务器数据回传时间(代理发送超时)默认值60s。# 允许请求的方式 比如常用的Restful GET/PUT/POST/DELETE。#这里是代理本地8085转发到本地8081 skywalking服务 增加超时配置以及。nginx鉴权弹窗 因为之前登录过 这里修改下nginx代理端口 重启nginx后。
vue发布到nginx下访问资源404，或白屏问题
liulang1905的博客
06-15 2819
这里先说404问题，比较简单就是vue中路由mode的问题 如果不嫌弃地址有#号的话就改成默认hash或者直接将这个属性删了就行，删了直接使用默认 如果说不想地址有#的话配置下nginx即可 nginx配置 try_files $uri $uri/ /index.html; 如果以上已解决您的问题可以不在往下看了，下面只是记录自己的一个踩坑过程，避免以后再犯 我的路由一直是使用的是 history ，没有配置nginx所以有了很多问题 先描述以下错误症状， 一开始发布到nginx下能访问，但是访问一会
Vue下路由History模式打包后页面空白的解决方法
08-27
主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nginx转发到页面白屏
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
11-17 495
laravel安装完成后，访问public目录，显示一片空白怎么回事 白屏没有错误提示一般是php.ini的display_errors没有启用的问题 所以首先确保display_errors已经是On的状态 然后打开Debug模式 在app/config/app.php中将’debug’=>false改为’...
nginx history模式 解决 路由跳转白屏
gu2022_3_5_21_23的博客
03-05 526
关于vue私用history模式打包到服务器出现白屏的原因以及解决办法
qq_41227106的博客
03-23 2216
1、vue-router在切换路由的时候有两种模式，第一种是hash（默认的），第二种是history，这两种的区别有： 第一，url的不同，使用hash模式url会带有#而history模式就像普通的路径一样 第二， ...
vue项目打包上线流程（nginx服务器配置、路由history模式白屏如何处理）
七的博客
06-08 502
Vue打包上线流程
vue 3.0用history路由打包后出现空白页面
weixin_43867229的博客
05-06 1435
vue 3.0用history路由打包后出现空白页面
【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决
记录
01-03 1613
在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。
nginx + php-fpm配置后页面显示空白的解决办法
Michelle技术分享
01-26 5238
nginx + php-fpm配置后页面显示空白的解决办法 由于nginx与php-fpm之间的一个小bug，会导致这样的现象： 网站中的静态页面 .html 都能正常访问，而 .php 文件虽然会返回200状态码， 但实际输出给浏览器的页面内容却是空白。 简而言之，原因是nginx无法正确的将 *.php 文件的地址传递给php-fpm去解析， 相当于php-fpm接受到了请求，但这请求却指向
vue路由history模式下nginx后台配置
05-01
Vue路由的History模式是一种利用浏览器的History API来实现路由跳转的模式，它的优点在于可以消除URL中的#号，并且更加美观，但需要后台支持。在使用Nginx作为后台服务器时，需要对Nginx进行相关配置。 首先，在Nginx的配置文件中需要添加如下配置： ``` location / { try_files $uri $uri/ /index.html; } ``` 以上配置表示如果请求的文件或目录不存在，则转发到index.html，这样Vue的前端路由就能够正常运作。 另外，还需要配置Nginx的静态资源目录，例如： ``` location /static/ { root /var/www/myapp; } ``` 表示请求/static/文件时，将交由/var/www/myapp目录下的文件处理。 需要注意的是，如果使用Vue的History模式，很可能会出现“404页面找不到”的错误，因为Nginx接收到的URL都是以/开头的，Nginx会将这些URL视为文件路径进行处理，而不是Vue路由中的路径。这时候需要对Nginx进行进一步配置，例如： ``` location /app/ { try_files $uri $uri/ /app/index.html; } ``` 表示所有以/app/开头的请求都交由/app/index.html处理，这样就可以解决404页面找不到的问题。 总之，对于Vue路由的History模式，需要在Nginx服务器上进行相关的配置，保证前后端的对接顺畅，使得应用程序能够正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值