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

Posted 2022-12-03 OkidoGreen

apache 解决方案：

(1414条消息) Apache部署vue项目刷新404问题_覅乆的博客-CSDN博客_apache vue刷新404https://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，如图。

在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.html 、index.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