900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Vue项目nginx服务器部署刷新页面404错误

Vue项目nginx服务器部署刷新页面404错误

时间:2021-07-28 16:38:16

相关推荐

Vue项目nginx服务器部署刷新页面404错误

最近想自己做点小项目练手,前端用的是vue框架,用nginx当做服务器来部署。但是当部署完成后,遇到了刷新页面和打开新页面报404错误的问题

问题就像上面描述的一样,刷新页面和打开新页面都是报404错误。

先说最终解决办法,在nginx的配置文件的location中改一下设置方式:

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

location改为这么设置,就好了,具体原理看解决问题的帖子中解释是:

打包后的vue是单页面结构,所有内容都在index.html中渲染加载,改变请求地址后到指定目录下必然找不到,所以会报错,这么设置就是所有请求都回到index.html页面中

下面说说为了解决问题的尝试:

location配置路径到vue的具体路径中(失败)云服务端口开放更多(失败)location配置所有请求用index跳转到index.html(失败)

​一个个解释失败原因:

第一个:location配置路径到vue的具体路径中

这么弄主要还是因为vue项目中有路由的改写,地址栏虽然写的是localhost:8080/a/b/c,但是vue实际跳转时候已经改写为:localhost:8080/d/e/f了,所以当时以为这就可以了,然而看到打包后的dist文件夹后就知道不对了

第二个:云服务端口开放更多

这里开放更多端口,主要还是后期找太久问题找的有点蒙了。。。其实端口开放与否与404没有关系的

第三个:location配置所有请求用index跳转到index.html

这是距离实际成功最近的一回,只是用方式了,想法是对的

location配置中index和try_files是有些不同的

index:主要作用是当没有访问任何文件时,默认访问后面指定的文件,如果想访问的不存在,要么先访问location / {},要么跳转到指定的错误页面

try_files:主要作用是找到并访问指定目录下的某个文件,配置中用$uri 和 $uri/代表所有访问请求都回到这个index.html

不过理论上原来我设置的是:

location / {root html;index index.html index.htm;}

感觉也应该可以的啊?还是理解有点浅了,持续学习吧

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。