分享一个上线BI项目的小坑(包括心路历程):刷新项目就404 - 编程导航

节省大家时间直接挂解决链接

https://blog.csdn.net/weixin_68714627/article/details/134702437?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-134702437-blog-105078017.235%5Ev43%5Epc_blog_bottom_relevance_base7&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-134702437-blog-105078017.235%5Ev43%5Epc_blog_bottom_relevance_base7&utm_relevant_index=1

问题:部署完毕后首次运行正常,刷新浏览器变404

思路:需要配置Nginx，使得对所有前端路由路径的请求都返回同一个 index.html 文件。

解决:在前端部署Nginx 的配置中，添加一个新的 localtion/ 块，并使用 try_files 指令，这样所有的路由都会被指向 index.html 文件

// nginx配置文件

location / {

try_files $uri $uri/ /index.html;

}

以下为心路历程

今天域名备案通过后,立刻就准备着手上线项目.

参考其他球友的笔记着手宝塔部署. 但对于初次部署的我来说着实踩了不少坑,球友的部署笔记基本是大概给个流程或者踩坑记录,但是自己实操的时候遇坑网上还找不到合适的解决方法时着实崩溃.不过最后终于是部署完毕(后期有时间我也写一篇关于自己的部署踩坑供大家避雷)

言归正传,部署完成后用自己的域名访问成功超级高兴,但一刷新页面直接报404

问题来了就着手解决

搜了一下项目上线后一刷新就404

看到后内心os(这个是vue项目解决,不知道react项目好不好使),点进去

https://blog.csdn.net/qq_35432904/article/details/105078017

基于他自己的项目介绍了原因 : 把vue router 的mode改成了history,结果跳转页面没问题，刷新页面的时候报404错误

,给了三套解决方案 :

方案一：vue router 的mode改成hash

方案二：nginx修改

方案三：Apache

基于我对前端一窍不通,看完也是不是太理解,但是锁定了第二个解决方案 nginx修改 (改前端心里发虚,生怕改错了那儿自己还看不懂)

锁定目标继续搜

找到了这个 https://blog.csdn.net/qq_29454203/article/details/124317617

我就喜欢语气肯定的哈哈

发现搜的解决方案基本上都有这个在nginx加一段配置

try_files $uri $uri/ /index.html;

好, 现在需要加配置那么问题来了加那个地方

大家给出的图基本是这样

但我的配置是这种形式,心里想着不一样啊也看不懂这些配置也不敢乱加

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires 30d;

error_log /dev/null;

access_log /dev/null;

}

然后就搜nginx配置文件都是什么意思,把自己的配置复制问科大讯飞让它介绍一下

然后问我这段代码该加在那个地方,它直接说加最后面,我感觉不靠谱

再问回答道:

加两个配置后后面

如图

感觉可以,试了一下.结果问题没有解决.依然404

最后观察别人代码都有

location / {

.....

}

没办法,配置没有自己写一个吧然后抱着试试的心态找个空位置补了一段

location / {

try_files $uri $uri/ /index.html;

}

尝试 , 成功!

最后感慨如果身边有个可以提问题的老师,可能别人看一眼就解决了.

而自己摸索需要一次一次试,改配置,重启.不行,再改.自己一点一点试出来.有时候有的问题卡几天心态也受影响.

不过这也是进步的过程,加油.