vue-nginx刷新404问题

这篇具有很好参考价值的文章主要介绍了vue-nginx刷新404问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先说初步得到的结论,这只是我根据测试结果的推测,并没有阅读源码探究原因。在nginx如下配置中,有’/index’路由匹配规则

location /index {
    alias  /home/hfy/dist;
    index  index.html;
}

由于’/index’中的index为关键字,导致路由匹配发生异常,与预期不符,把’/index’更改为’/home’,恢复正常

1. 背景介绍

vue项目只有一个组件,路由模式是history,路由中有一个根路径重定向配置,路由配置如下

const routes = [
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../views/IndexView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

vue项目build之后,使用nginx部署build之后的产物,nginx路由配置如下


location / {
    root   /home/hfy/dist;
    index  index.html;
}

location /index {
    alias  /home/hfy/dist;
    index  index.html;
}

/home/hfy/dist文件夹中存放的是build产物,包含css、fonts、js文件夹以及favicon.ico、index.html

我添加上述 location /index规则是想解决刷新页面后404问题

即通过url: example.com访问时,加载到index.html之后,前端路由会重定向到example.com/index,这时候刷新页面,浏览器会请求example.com/index。如果不添加location /index规则,nginx无法匹配到/index,会返回404。

但是我添加该规则后遇到了下面的问题一。

2. 问题描述

2.1 问题一

通过url:example.com 访问该项目,nginx提示404

通过url: example.com/index 访问该项目,可以正常访问

2.2 问题二

如果把nginx路由配置更改为


location / {
    root   /home/hfy/dist;
    index  index.html;
}

#location /index {
#    alias  /home/hfy/dist;
#    index  index.html;
#}

通过url: example.com 访问该项目,可以正常访问

通过url: example.com/index 访问该项目,nginx提示404

3. 原因分析

3.1 问题一

  • 通过url: example.com/index 访问该项目时,命中规则
location /index {
    alias  /home/hfy/dist;
    index  index.html;
}

/home/hfy/dist文件夹中存在index.html,所以访问的是/home/hfy/dist/index.html

  • 通过url: example.com 访问该项目时,命中规则
location / {
    root   /home/hfy/dist;
    index  index.html;
}

应该能访问到/home/hfy/dist/index.html,但是却提示404, 无法理解,在4.排查问题一原因中将介绍如何找到该问题原因

3.2 问题二

问题二我是这样理解的,location /index规则被注释掉不起作用

  • 通过url: example.com 访问项目时,命中规则
location / {
    root   /home/hfy/dist;
    index  index.html;
}

域名会被root替换,访问的是/home/hfy/dist/中的index.html

  • 通过url: example.com/index 访问项目时,同样命中上述规则,域名被root替换,访问的是/home/hfy/dist/中的index文件或者index文件夹,但是并不存在index文件或者index文件夹,所以报错404

4. 排查问题一原因

我之前还写过另一个vue项目,跟这个项目类似,前端路由中同样使用了history模式以及重定向,nginx配置也类似,但是却没有出现404问题,那我就把这两个项目做对比,排查原因。为了方便叙述,把出404问题的项目叫做项目一,未出问题的项目称项目二。如下是项目二的配置。

// 前端路由配置
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/HomeView.vue')
  }
]
# nginx配置
location / {
    root   /home/hfy/other_dist;
    index  index.html;
}

location /home {
    alias  /home/hfy/other_dist;
    index  index.html;
}

我怀疑可能出问题的地方如下

  1. 由于项目一与项目二vue-router等依赖的版本不同,项目一的index.html可能有问题
  2. 项目一的nginx虚拟主机配置有问题

为了验证1,我把项目二nginx配置location / root指向项目一,发现可以通过/ 访问到index.html,说明项目一的index.html文件没问题

为了验证2,我把项目一的location规则换成项目二的规则,在更换的过程中,发现只把location / root指向项目二,通过/访问不到项目二,但是把location /index换成location /home alias指向项目二,突然可以访问到项目二了。说明项目一的虚拟主机配置没问题,这时候也意识到了location /index中index是关键字,关键字不能直接写在location匹配url中

5. 反思

在实际排查问题一时,并不是这么简单,而是想到什么测试什么,这样测试比较混乱,容易重复测试,或者漏掉测试,这样测试得出的结论也不自信,也容易忘记测试的结果。

应该提前想好可能是哪里出现问题了,并一一罗列出来,根据这些问题设计出测试方法,并想好每一种测试结果能推测出的结论。还要及时做记录,防止遗忘。

发现浏览器隐私模式也会使用缓存,在测试问题前要清理浏览器缓存。

6. nginx root与alias的使用

在排查问题时详细分析了nginx root与alias的用法: 详解nginx的root与alias

7. 更优雅地解决vue网页浏览器刷新404

7.1 try_files

上面的解决方法是在nginx中为vue的一个路由单独配置location规则,并依靠alias正确返回index.html文件,即构建好的前端页面。如果前端路由比较少,这种方法还能够接受。如果前端有十几个甚至几十个路由,就需要在nginx中同步配置这些路由,显然太麻烦了。

在Vue Router官网中提到了history路由模式下浏览器刷新404的问题

当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id 漂亮!

不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id ,就会得到一个 404 错误。这就尴尬了。

官方给出了nginx的解决方案

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

try_files指令的详细解析可以参考文章Nginx的try_files指令详解,其作用是按顺序检查文件是否存在,返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹),如果所有的文件或文件夹都找不到,会进行一个内部重定向到最后一个参数。

我们以https://example.com/user/id 为例。

try_files首先会在nginx指定的root目录下寻找$uri文件。假设root设置为/home/hfy/,那么就是寻找/home/hfy/$uri,其中的$uri是url中的路径,即/user/id。所以最终的访问路径是/home/hfy/user/id。

如果不存在id这个文件,就继续判断是否存在/home/hfy/user/id/文件夹。如果仍然不存在,就返回指令的最后一个参数,root文件夹中的/index.html文件,即/home/hfy/index.html

root与alias作用域

我们看到官方给的配置中,并未出现root

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

root可以在location内部指定,只针对该location规则生效,也可以写在location外server内,作用域是整个server,但是location内的root会覆盖掉外部root。如果没有设置root,默认是nginx安装目录的html文件夹。比如我的是/usr/local/nginx/html/

alias只能写在location内部。

7.2 error_page 404

在nginx设置

error_page 404 /index.html;

同样可以在刷新时正确返回index.html页面,这样做是在投机取巧。虽然返回了正确页面,但是在浏览器控制台的网络请求中可以看到响应的状态码仍然是404,所以推荐try_files的方法。

7.3 前端配置404

我们在nginx使用try_files指令解决了404问题,但是也带来了新的问题。假设用户访问前端并不存在的路由比如http://example.com/not/exist ,但nginx仍然返回了index.html,用户并不知道发生了404错误。这就需要在前端专门提供一个404页面,当用户访问不存在的路由时,展示该页面。

vue router配置如下文章来源地址https://www.toymoban.com/news/detail-475917.html

const HomeView = () => import('@/views/HomeView')
const ErrorView = () => import('@/views/404View')
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  // 增加404路由与页面,测试发现path: '*' 不是必须写在最后的
  {
    path: '/404',
    component: ErrorView
  },
  {
    path: '*',
    redirect: '/404'
  }
]

到了这里,关于vue-nginx刷新404问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ruoyi vue部署服务器,点击刷新、登录主页、退出报404和nginx问题解决

    官网文档:前端手册 | RuoYi 步骤如下:有些特殊情况需要部署到子路径下,例如: https://www.ruoyi.vip/admin ,可以按照下面流程修改。 修改 layout/components/Navbar.vue 中的 location.href 修改 utils/request.js 中的 location.href 打开浏览器,输入: https://www.ruoyi.vip/admin  能正常访问和刷新表示

    2024年02月04日
    浏览(61)
  • 前端部署nginx刷新后404,解决Nginx刷新页面后404的问题

    使用Nginx部署后,登录页面刷新一下就出来404,如下图: 刷新以后 ,页面变成404 Not Found 查看了一下nginx配置,出现问题的配置是这样的: 修改后的配置是这样的 添加了 try_files $uri $uri/ /index.html, 然后重启一下nginx问题就解决了。 解释: try_files 表示检查文件是否存在,返回

    2024年02月13日
    浏览(51)
  • docker使用nginx部署vue刷新页面404

    从docker内部复制出来的配置文件是这样的,但是刷新页面之后就显示404,关键是我两个前端项目都是用的这一个配置文件,但是只有一个项目出现刷新浏览器显示404的问题,这给我搞懵了!!! 在网上查找问题原因和解决办法,但是大多数都说是资源找不到,让修改配置文件

    2024年01月18日
    浏览(47)
  • Vue项目nginx服务器部署刷新页面404错误

    最近想自己做点小项目练手,前端用的是vue框架,用nginx当做服务器来部署。但是当部署完成后,遇到了刷新页面和打开新页面报404错误的问题 问题就像上面描述的一样,刷新页面和打开新页面都是报404错误。 先说最终解决办法,在nginx的配置文件的location中改一下设置方式

    2024年02月17日
    浏览(57)
  • Nginx笔记-vue项目刷新出现404(try_files和index)

    目前的nginx.conf配置: 部署是成功了,但是有个问题,就是感觉整个前端不会找uri,按F5或者在浏览器输入url都会404,只从vue默认的地方进,才行。 解决方法: 原因: index index.htm index.html; index 就是根目录,也就是只识别“/”结尾的,输入不存在或者刷新页面的路径就直接报

    2024年02月09日
    浏览(46)
  • vue项目history模式刷新404问题

    vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置: nginx配置内容: apache配置内容: 这句配置的意思是每次匹配url路径时候找不到对应静态

    2024年02月11日
    浏览(47)
  • 服务器部署—若依【vue】如何部署到nginx里面?nginx刷新页面404怎么办?【完美解决建议收藏】

    服务器部署项目我们大家都会遇到,但是有些铁子会遇到很多的问题,比如前端部署nginx如何操作? 前端有单纯的静态页面、还有前后端分离的项目;这里博主直接分享最牛最到位的前后端分离项目的前端部署到nginx上面,以若依项目【springboot+vue】为例,实现将前端部署到

    2024年02月03日
    浏览(59)
  • 404 not found nginx(dist打包后,刷新和跳转都是404 not found nginx的问题) 解决方案(打包发布在服务器)

    当我们执行了yarn run build之后,生成dist文件 我们将代码放入nginx-1.24.0下面的html中 然后我们就配置conf文件下的nginx.conf  配置方面不介绍了,主要问题是因为没有加这句话  问题分析 index index.htm index.html; index 就是根目录,也就是只识别“/”结尾的,输入不存在或者刷新页面

    2024年02月08日
    浏览(44)
  • Nginx 详细配置(如:vue配置history刷新不404,https配置,配置代理等等,服务器配置)

    1.安装 Nginx:首先,确保您的服务器上已经安装了 Nginx。如果没有安装,可以通过包管理器(如apt、yum等)进行安装。或者在官网安装对应版本管理,官网下载地址:https://nginx.org/en/download.html 不同的版本不同的安装方法,自行百度 2.配置 Nginx:找到 Nginx 的配置文件(通常位

    2024年02月17日
    浏览(53)
  • 部署问题-Vue Router在history模式下刷新页面404问题

    Vue Router模式: (1)Hash:原理是onhashchange事件 请求中是在hash值之前的内容,所以请求始终是有效的 (2)History:原理是利用了h5的Interface 中的pushState()方法和replaceState()方法,它们提供了对浏览器历史记录进行修改的功能,但当它们执行修改时,虽然改变了当前的 URL,但浏览

    2024年02月04日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包