问题
最近上线Vue项目到服务器,上传之后就出现了,代理404的问题。Dev环境中的代理是工作正常的,这点让我很疑惑,但这恰巧是我的一个误解,下面是这次的解决思路。
解决思路
一开始,我以为vue.config.js中的,devServer中的proxy是在路由(Router)层面做的数据转发,所以在这上面花了一些时间进行研究。后续通过查阅官方文档发现,devServer配置的是一个nodejs的测试服务器参数,而不是路由参数后,恍然大悟。(这就是我的误解所在）
解决这个proxy的方向,应该是关注于配置自身的HTTP服务器的代理上面,如果是Nginx,就要配置Nginx的路由转发;我这里用的是Apache作为我的HTTP服务器,所以应该配置的是对应的代理参数。
配置步骤
HTTP服务器部分
1.打开Apache的httpd.conf,开启以下两个proxy拓展,保存
LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so
2.在https.conf中配置监听接口,保存
3.打开httpd-vhost.conf如下图配置即可
4.此时HTTP服务器部分就配置完成了,此时仅需重启Apache服务器即可生效。
Vue部分
因为是使用了History模式的路由,所以为了正确路由到相关的页面,还需要配置相关的PathRewrite才能正确路由。
1.在vue生成生产环境文件的文件夹中,添加.htaccess文件(我使用的是默认参数,所以就在dist文件夹中)
2.配置以下参数即可。(参数参考官方文档进行配置)
3.至此Vue部分配置完成,重新访问404的问题就消除了。
