SPA单页面部署后刷新404

项目场景

• 将vue项目打包部署到nginx上面运行

• 打开nginx的主配置文件： nginx安装目录/conf/nginx.conf。

• 将vueCLI打的项目包（dist目录）交给nginx服务来管理。使得访问某些路径时，可以指向dist/index.html。

问题描述

• 运行时页面白屏。

• 页面可以正常显示，当刷新页面的时候页面报404错误。

原因分析

页面白屏分析：我们可以先查看一下nginx下的 logs/error.log 日志文件，确定我的问题是因为项目打包时候路劲配置问题。

页面404分析：我们在将 vue项目打包部署时，地址栏的地址只是 vue的路由，并不是真正的文件目录地址。所有的路由都是依赖于 SPA单页应用的index.html，所以当我们在刷新时，按照地址栏的地址，找不到对应的文件，就产生404。

解决方案

配置nginx中conf目录下的nginx.conf文件

location / {
    # root定义网站根目录   html
    root   dist;

    # index定义网站的首页   html/index.html
    index  index.html index.htm;

    # 避免f5刷新后404
    try_files  $uri  $uri/  /index.html;
}

重启ngnix

nginx -s reload