Vue 项目(HTML5 History 模式) 部署服务器

history路由404配置

后端配置:

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

一、前端配置:
①、router配置--指定路由起始(在开发模式中,Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录,但是在真实服务器中,项目肯定不会放在根目录,所以要指定router的base)


 
router

提前和后端商量好项目部署的服务器文件夹路径

②、编译打包配置
进入config --> index.js


 
build

③、使用npm run build进行打包,至此前端能做的配置已经做完

二、后端配置:
路由跳转出现404,主要原因是后端对这个虚拟的前端路由没有做任何处理,服务器在找不到指定路径下的资源时,只能向客户端返回404。
解决办法(Apache):进行url重写 --- 将Vue项目所在服务器文件夹下的路径,例如:
leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html
leibo.group/app/.... 重写为 leibo.group/app/index.html

 
.hatccess

具体的Apache开启allowoverride ,url重写,后端分分钟就解决了
如果是其他类型服务器


作者:雷波_viho
链接:https://www.jianshu.com/p/a770f52be23c
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文地址:https://www.cnblogs.com/zwjun/p/12782726.html