今天在部署项目时遇到的问题,在网上都找不到解决方法(或许自己没找对),所以自己捣鼓了下,测试加分析定位bug,最后总算解决了,所以要记录一下。

1. 问题描述

vue项目打包后部署到Nginx,Nginx作为静态服务器

项目路由启用HTML5的history模式

项目路径:html/some/path(Nginx的HTML目录)

publicPath:配置为 /some/path/ (vue.config.js中的publicPath)

ngixn配置:

location ^~ /some/path/ {
    root    html/;
    try_files   $uri $uri/ /index.html;
}

访问: http://www.demo.com/some/path

结果:能成功访问,点击页面跳转也是正常的,似乎网站部署成功了

情形1:若刷新(点击浏览器刷新按钮)http://www.demo.com/some/path,这时也可以正常显示,这时没有问题的

情形2:当页面跳转到其他页面或者说其他路径,如:

http://www.demo.com/some/path/otherpage

这时点击刷新按钮,页面不存在了,Nginx返回404错误

或者直接输入:http://www.demo.com/some/path/otherpage,点回车也是这种情况

2. 问题分析

情形1分析:成功原因是因为Nginx匹配到目录/some/path下的index.html文件

主要分析失败原因

情形2分析:失败原因是因为Nginx在html/some/path/otherpage没有找到相应文件或文件夹,便会在html中找index.html文件,这时也没有找到index.html文件,就报404错误。这里就要知道try_files配置的作用了,原因也在这里。

问:为什么在html/some/path/otherpage没有找到相应文件或文件夹就会在html静态根目录找呢?

首先,先了解一下try_files指令:

try_files指令
语法:try_files file ... uri 或 try_files file ... = code
默认值:无
作用域:server location
其作用是按顺序检查文件是否存在,返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹),如果所有的文件
或文件夹都找不到,会进行一个内部重定向到最后一个参数。
需要注意的是,只有最后一个参数可以引起一个内部重定向,之前的参数只设置内部URI的指向。最后一个参数是
回退URI且必须存在,否则会出现内部500错误。命名的location也可以使用在最后一个参数中。与rewrite指
令不同,如果回退URI不是命名的location那么$args不会自动保留,如果你想保留$args,则必须明确声明。
摘自网上:https://www.hi-linux.com/posts/53878.html

看到这应该就能明白为什么会在html静态根目录找,原因就是最后一个参数:/index.html

3. 解决方法

回到我们的需求来,当在html/some/path/otherpage没有找到相应文件或文件夹时,我们希望他应该在html/some/path里找index.html文件。

所以解决方法也很简单,就是在try_files中将/index.html修改为/some/path/index.html

终于搞明白了,嘎嘎,记录下。。。

Logo

前往低代码交流专区

更多推荐