Vue项目上线后,点击刷新按钮(f5)报错404的问题(使用nginx)
Vue上线后,点击刷新按钮报错404问题使用vue-cli构建的项目上服务器后,点击刷新按钮报错404问题,这个问题困扰好多天了,今天决定把它解决掉。首先,出问题的原因是:在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转。使用history模式的配置是:export default new Router({ mode: 'h...
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
(nginx的使用)https://blog.csdn.net/tomcat_2014/article/details/53129796
通过nignx的学习加上vue-router的官方文档的介绍:
nginx配置文件的写法
这里配置location的时候要注意一下:
root写自己tomcat/webapps的路径
proxy_pass 写跳转后的地址,比如我这里是ip地址:端口号 ,注意后面不要加 /
这么写之后,就能实现vue的刷新功能了。
附Nginx常用命令:
启动
./nginx
检查 nginx.conf配置文件
./nginx -t
重启
./nginx -s reload
停止
./nginx -s stop
更多推荐
所有评论(0)