Nginx:vue路由使用history模式刷新404

apache 解决方案:

(1414条消息) Apache部署vue项目刷新404问题_覅乆的博客-CSDN博客_apache vue刷新404icon-default.png?t=M85Bhttps://blog.csdn.net/zhouqiyuan1233/article/details/122193773若依 前端框架部署 apache 代替nginx的try_file - 西瓜霜 - 博客园 (cnblogs.com)https://www.cnblogs.com/zonglonglong/p/16285699.html

当vue-router使用history模式时,当我们刷新页面或直接访问路径的时候就会返回404,如图。

Nginx:vue路由使用history模式刷新404_第1张图片

在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我们直接在浏览器输入这个地址的时候,就会对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。

我们可以通过把所有请求都转发到首页上来解决这个问题。 使用 Nginx try_files

location /{
    root  /website/wenfu_zszk/;
    index index.html;
 
    #解决404
    try_files $uri $uri/ /index.html;
  }

try_files

  • 语法:try_files file … uri;try_files file … = code;
  • 默认值:无
  • 作用域:server location
  • 语法解释:
    • 官方:Checks the existence of files in the specified order and uses the first found file for request processing; the processing is performed in the current context. The path to a file is constructed from the *file*parameter according to the root and alias directives. It is possible to check directory’s existence by specifying a slash at the end of a name, e.g. “$uri/”. If none of the files were found, an internal redirect to the *uri* specified in the last parameter is made.
    • 翻译
      • 首先:按照指定的顺序检查文件是否存在,并使用第一个找到的文件进行请求处理
      • 其次:处理是在当前上下文中执行的。根据 root 和 alias 指令从 file 参数构造文件路径。
      • 然后:可以通过在名称末尾指定一个斜杠来检查目录的存在,例如“ $uri/”。
      • 最后:如果没有找到任何文件,则进行内部重定向到最后一个参数中指定的 uri。
    • 自己理解的:按顺序检查文件是否存在,返回第一个找到的文件或文件夹(结尾加斜线表示文件夹),如果所有的文件或文件夹都找不到,会进行一个内部重定向到最后一个参数。

注:只有最后一个参数可以引起一个内部重定向,之前的参数只设置内部的 URL 的指向。最后一个参数是回退 URL 且必须存在,否则会出现内部 500 错误。命名的 location 也可以使用在最后一个参数中。

举例说明

  • 示例一:
location / {
    root data;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}
  • 解释配置:

    • root:设置静态根目录为 data
    • index:设置目录的默认文件为 index.htmlindex.htm
    • try_files:设置文件查找规则为 $uri $uri/ /index.html。即3个规则,先从 $uri 查找,再从 $uri/ 目录中查找,最后查找 /index.html
  • 例子:根据上面的配置,当请求 http://localhost:3004/api 时,$uri/api。当前try_file 具体为:/api/api//index.html,其中 / 表示根目录(根据 root 或 alias 来指定)。

  • 查找逻辑:

    • 首先:检查 data 目录中是否存在 api 文件,如果存在,则返回文件;如果不存在,则进行下一步。
    • 其次:检查 data 目录中是否存在 api/ 目录,如果存在,则在检查 api/ 目录中是否存在 index.html 或者 index.htm 文件(由 index 指定);如果存在,则返回该文件。如果不存在,则进行下一步。
    • 最后:检查 data 目录中是否存在 index.html 文件。如果存在,则返回文件;如果不存在,则返回 404。
  • 示例二:

location /pngs/ {
    root /data/user/;
    index index.html index.htm;
    try_files $uri   $uri/  /pngs/file.png; 
}
  • 根据上面的配置,当请求 http://localhost:3003/pngs/rule.png 时, $uri/pngs/rule.png,当前 try_file 查找顺序为,首先是:/data/user/pngs/rule.png,其次是:/data/user/pngs/rule.png/ 文件下的 index 所配置的文件,即: index.html、index.htm,最后是: /data/user/pngs/file.png

写在后面

既然所有找不到路由的请求都返回index.html,那真正404的请求就不会显示404了。
所以在vue的src/router/index.js中要这样设置:

export default new Router({
  mode: 'history',            
  routes: [
    {
      path: '/pub',
      component:Empty
    },
    {
      path: '*',            //其他路由显示404
      component: NotFound,
    }
  ]
})、

(1413条消息) 解决Vue中使用history路由模式出现404的问题_NetRookieX的博客-CSDN博客_history模式404https://blog.csdn.net/NetRookieX/article/details/121448145

Vue路由history模式解决404问题的几种方法_vue.js_脚本之家 (jb51.net)https://www.jb51.net/article/148234.htm

你可能感兴趣的:(Nginx,nginx,vue.js,前端)