VUE 项目刷新路由指向index.html

背景描述：

VUE 项目经过 npm run bulid 生成静态文件上传到服务器后，当我们切换路由并刷新页面，nginx 服务器会报 502 或者 404 错误。

原因分析：

我猜测是因为在 VUE 项目中，路由是利用H5的 history ，看起来页面 url 发生了变化，其实根本就在同一个页面。简而言之，除了根路由之外的路由并不是有效的 url，所以直接刷新页面并不能 get 到对应的内容。

解决方案：

通过 nginx 配置，让所有页面回到根路由。

        location / {

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;

                proxy_set_header X-Nginx-Proxy true;

                proxy_pass http://blogfront;
                proxy_redirect off;

                rewrite ^(.*)$ /index.html;
        }

关于如何配置 nginx，可以参考这篇文章。

这里主要说一下最后一行，它表明在根路由下，所有页面路径都回到 /index.html。