Vue第14篇，Vue项目上线nginx后，页面刷新丢失？（nginx页面刷新丢失）

一.项目问题

Vue项目在Nginx服务器上线后，页面刷新丢失。

---

二. 只需要在nginx文件中，添加以下代码

location / {
    ……
    try_files $uri $uri/ /index.html;
}

1. 这个配置通常用于单页应用的前端路由处理

工作原理：

1. location / 表示这个规则适用于所有的 URL 路径。

2. try_files 指令告诉 Nginx 按照指定的顺序尝试查找文件：

        (1). $uri：首先尝试找到与请求 URI 完全匹配的文件。
        (2). $uri/：如果没有找到精确匹配的文件，则尝试将请求的 URI 作为目录，查找该目录下的索引文件。
        (3).  /index.html：如果前两步都失败了，则返回 /index.html 文件。

2. 配置的主要目的

        1. 对于实际存在的静态文件（如 CSS、JavaScript、图片等），Nginx 会直接提供这些文件。
        2. 对于不存在的路径，而不是返回 404 错误，Nginx 会返回 /index.html 文件。这允许前端路由（如 Vue Router 或 React Router）接管路由控制，实现单页应用的功能。