nginx启动vue项目刷新页面404

问题描述

vue单页面history路由模式项目部署上线之后, 刷新页面会跳到404页面

异常原因

页面刷新时会重新向服务器发起请求，因是单页面应用，故仅存在一个页面，非首页页面刷新时（路径并非首页路径），服务器接收到请求后，找不到对应的文件，故返回404。

解决方案

在ngixn配置中添加如下配置即可

location / { # 默认路径下
    root   /home/myprojecct/dist; # 渲染所需页面的位置, 适合webpack打包后的文件目录
    index  index.html;
    try_files $uri $uri/ /index.html; # 解决页面刷新404问题
}

• 其他nginx详细配置可参考该文章 Centeros安装常用工具Git、Nginx、并配置前端nginx代理