宝塔服务器配置nginx刷新404的问题汇总

我们在本地使用vue测试和切换页面没有任何问题。于是打包好文件并上传到服务器,页面可以正常打开,但是一刷新就会出现页面404,这种情况我们该怎么办呢?

首先分析问题

这种原因多数情况是因为vue中的router模式设置为history模式,页面url切换的跟随着路由切换,
但刷新时浏览器并不知道你的网页输入的参数地址是想要访问什么,并没有找到你想要访问的文件目录,所以会报错404;

分析清楚问题之后我们应该怎么办呢?

一、切换hash模式

直接在进入route路由请求也,把route模式改为hash模式访问,但这种模式有个缺点,后面会跟个#号,
但我们并不希望使用这种模式,而且看起来很难看让人摸不清头脑,后面到底是想请求什么呢

二、修改nginx的nginx.conf配置文件

在location中添加如下代码。
root 和index一般默认即可。
除非你index文件没有放在根目录

location / {
  root ***
  index ***
  try_files $uri $uri/ /index.html;
}

三、修改宝塔配置文件


这种修改不太建议,因为404有可能被拦截

四、使用伪静态目录

当域名不能地址报错时,统一指向默认地址

if (!-e $request_filename) {
    rewrite ^/(.*) /index.html last;
    break;
}

原文地址:https://www.cnblogs.com/lovecode3000/p/12393168.html

时间: 2024-08-30 15:51:01

宝塔服务器配置nginx刷新404的问题汇总的相关文章

vue部署docker下的nginx刷新404问题及解决方案

环境描述 本次环境是通过jenkins编译npm run build 或者UMI_ENV=dev umi build 生成dist目录通过Dockerfile build一个新镜像上传私服通过swarm集群service运行镜像,使用与swarm一个net下的nginx代理访问的. [[email protected] DEV-sk_platform_brand_common]# cat DockerfileFROM basic-registry.xxxx.com/skong/nginx###继

Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口 vue中配置保持不变 nginx中配置如下: server { listen 8899; server_name localhost; location / { try_files $uri $uri/ /index.html; } } 第二种就是 # 打包配置 config-index.js 修改路径: assetsPublicPath: './'; # 前端路由配置 router.js: const rou

NGINX 配置404错误页面转向

什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是NGINX服务器,那么404页面的内容则为:404 Not Found 为什么要自定义404页面 在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄悄的流失了.如果此时能有一个漂亮的页面能够引导用户去他想去的地方必然可以留住用户.因此,每一个网站都

Nginx实现404页面的几种方法

转自 Nginx实现404页面的几种方法,你知道几种 – 运维派http://www.yunweipai.com/archives/22238.html 第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen      80; server_name  www.test.com; root   /var/ww

javascript刷新页面的方法汇总

如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进

Nginx指定404错误页面方法

Nginx指定404页面的方法: 404页面分为三种(小编认为目前知道三种,有(ma)待(la)考(ge)察(bi)) 第一种:Nginx自己的错误页面 nginx访问一个静态的html 页面,当这个页面没有的时候,nginx抛出404,那么如何返回给客户端404呢?看下面的代码 这种情况下不需要修改任何参数,就能实现这个功能. server {     listen      80;     server_name  a.b.com;         root   /var/www/error

nginx设置404 500页面跳转至首页,K哥

2015.9.29 开发找我说网站要设置个页面跳转 nginx设置404 500页面跳转至首页 什么是404页面? 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是NGINX服务器,那么404页面的内容则为:404 Not Found 为什么要自定义404页面? 在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄

部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)

部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作Linux系统的工具极力推荐FinalShell. 一眼看过去是不是感觉很方便,对内存.CPU的监控也可以实时看到,访问目录更是方便,对于Linux小白来说简直是神兵利器. 好了,我要开始入坑了. 问题一:权限不够 把vue包放到tomcat->webapps->ROOT目录下. 启动tomcat:

vue-cli,history 与 tomcat服务器,刷新404,请求资源404,解决办法

前文:CSDN也发布了相同文章,https://blog.csdn.net/qq_41797950/article/details/104373743. 问题:vue-cli,路由history,tomcat服务器,刷新404问题,刷新后请求资源路径不对. 配置:vue-cli:版本2.9.6服务器:tomcat 注:仅是本项目的解决办法,可以参考,希望能帮到大家 1- config文件夹index.js,build下的 assetsPublicPath 改为 ‘/ec/’,名字根据项目自己定义