场景
vue项目中,路由使用history模式。当访问项目的时候,是可以正常访问的,但是当我们刷新页面或者直接访问路径的时候就会返回404。
原因分析
在history模式下,通过监听 popstate 事件驱动界面变化,监听 a 链接点击事件用history.pushState、history.replaceState 方法改变 url来实现更新页面部分内容的操作,并没有发起http请求。但是当直接刷新页面或者直接访问路径的时候,就会对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。
解决方案
nginx配置如下:
server {
listen 8082;
location / {
root /opt/dist/vue-history;
index index.html index.html;
try_files $uri $uri/ /index.html;
}
}
拓展
部署后,当访问一些页面的时候,报错 Uncaught SyntaxError: Unexpected token ‘<’。
解决方案:
刚开始publicPath是’./’,需要改成’/’,即在vue.config.js
中修改配置
module.exports = {
...
publicPath: '/',
}
总结
以上是vue中路由使用history模式部署遇到的一些问题,希望这篇文章对你有所帮助!