Nginx: Vue路由history模式下,publicPath配置为子目录时,页面刷新报404错误
今天在部署项目时遇到的问题,在网上都找不到解决方法(或许自己没找对),所以自己捣鼓了下,测试加分析定位bug,最后总算解决了,所以要记录一下。1. 问题描述vue项目打包后部署到Nginx,Nginx作为静态服务器项目路由启用HTML5的history模式项目路径:html/some/path(Nginx的HTML目录)publicPath:配置为 /some/path/ (v...
今天在部署项目时遇到的问题,在网上都找不到解决方法(或许自己没找对),所以自己捣鼓了下,测试加分析定位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
终于搞明白了,嘎嘎,记录下。。。
更多推荐
所有评论(0)