Vue项目上线后，点击刷新按钮（f5）报错404的问题（使用nginx）

谁践踏了优雅 2022-05-18 05:08 932阅读 0赞

# **Vue上线后，点击刷新按钮报错404问题** #

使用vue-cli构建的项目上服务器后，点击刷新按钮报错404问题，这个问题困扰好多天了，今天决定把它解决掉。

首先，出问题的原因是：

在 Vue 项目中，可以选择 hash或者 history.pushState() 实现路由跳转。

使用history模式的配置是：

export default new Router(\{

mode: 'history',

\})

那么，当我们 npm run build 完成并部署到服务器后，刷新某个路由下的页面，会出现 404 或者 502 错误。

这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

所以，解决问题的重点是如何使他找到正确的资源路径。

网上查找了一段时候后，有这几个解决方法：

1.被提到最多的是使用Nginx配置，让所有路由（url）下的页面重写到 index.html即可：

2.apache里面配置，这个方法在vue-router的官网有介绍（https://router.vuejs.org/zh/guide/essentials/history-mode.html\#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90）

3.原生nodejs配置（官方文档也有介绍）

之前是不希望加一个Nginx让开发变得更加麻烦，于是尝试使用其他的方式，结果花了不少时间还是没有解决，所以现在老老实实使用Nginx了。

网上查一下nginx的学习资料

（nigix的安装）[https://www.cnblogs.com/wangyulong/p/7350189.html][https_www.cnblogs.com_wangyulong_p_7350189.html]

（nginx的使用）[https://blog.csdn.net/tomcat\_2014/article/details/53129796][https_blog.csdn.net_tomcat_2014_article_details_53129796]

通过nignx的学习加上vue-router的官方文档的介绍：

![70][]

![70 1][]

nginx配置文件的写法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70][]

这里配置location的时候要注意一下：

root写自己tomcat/webapps的路径

proxy\_pass 写跳转后的地址，比如我这里是ip地址:端口号 ，注意后面不要加 /

这么写之后，就能实现vue的刷新功能了。

附Nginx常用命令：

启动  
./nginx

检查 nginx.conf配置文件  
./nginx -t

重启  
./nginx -s reload

停止

./nginx -s stop

[https_www.cnblogs.com_wangyulong_p_7350189.html]: https://www.cnblogs.com/wangyulong/p/7350189.html
[https_blog.csdn.net_tomcat_2014_article_details_53129796]: https://blog.csdn.net/tomcat_2014/article/details/53129796
[70]: /images/20220518/6e1b842c5d5842e3b4320011391621dc.png
[70 1]: /images/20220518/3b2d83b39d144e07ae26c3ce3b85a6e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvbm55ZWU_size_16_color_FFFFFF_t_70]: /images/20220518/226c19f18f6d45fa9fa90b40de3cb682.png