Vue项目部署刷新页面404

前端Vue项目部署之后,刷新页面后发现404

Vue是单页面应用(SPA),只有index.html作为入口文件,其它路由都是通过js跳转的。网页上显示的静态资源路径和服务器上的资源不匹配,无法找到静态资源,从而报错404。
解决办法
一、将Vue路由模式mode: ‘history’修改为mode: ‘hash’
Vue路由默认就是hash模式。hash模式下,在浏览器地址栏里面会有 www.commentpl.com/#/premier-league/123 这种带#号的情况,视觉上不太美观。
history模式下,地址栏为: www.commentpl.com/premier-league/123 不会出现带#的情况。

const router = new Router({
mode: ‘hash’,
routes: constantRouterMap
})

二、nginx.conf里面配置

location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}

分享到