feat: 前台404页与通配路由; 积木拖拽排序(vuedraggable); nginx SPA说明

Made-with: Cursor

nginx/README.md

@@ -72,3 +72,10 @@ sudo systemctl start nginx
 ```
 
 然后再按上面步骤创建证书目录、放入证书、复制 conf 并重载。
+
+## 5. 前台动态路由与 404（SPA）
+
+- **现象**：浏览器直接打开 `https://你的域名/some-page` 出现 **nginx** 的 `404 Not Found`（页脚带 `nginx/x.x.x`），而不是网站自己的页面。
+- **原因**：提供静态文件的 `server` 未把「不存在的路径」交给 `index.html`，Nginx 在磁盘上找不到 `some-page` 文件就返回 404。
+- **要求**：托管 **web 前台** 的站点必须使用 **`try_files $uri $uri/ /index.html;`**（见仓库 `nginx/web.conf` 与 `web/Dockerfile` 内嵌配置）。若你自建 Nginx，请对照修改后再 `nginx -t` 并重载。
+- **应用内 404**：在 SPA 已正确回退的前提下，未在后台发布的路径会由前端路由进入 **「页面不存在」** 页（`NotFound.vue`），与上述 nginx 404 不同。

nginx/web.conf

@@ -11,6 +11,7 @@ server {
     location = / {
         try_files /index.html =404;
     }
+    # 前台为 Vue SPA：任意路径须回退到 index.html，否则直接访问 /xxx 会得到 nginx 404
     location / {
         try_files $uri $uri/ /index.html;
     }