vue nginx

# 这是一个简单的 Nginx 配置示例，用于部署 Vue.js 单页面应用 (SPA)。

server {
    listen 80;
    server_name yourdomain.com;

    # 根目录设置为 Vue 项目构建后的 dist 文件夹路径
    root /path/to/your/vue-app/dist;

    # 默认首页文件
    index index.html;

    # 设置 location 匹配所有请求
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置反向代理（如果你的应用需要后端 API）
    location /api/ {
        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

解释说明：

1. listen 80;
   监听 80 端口，表示 Nginx 将处理 HTTP 请求。如果你想使用 HTTPS，可以监听 443 端口并配置 SSL 证书。

2. server_name yourdomain.com;
   指定服务器的域名，确保 Nginx 只响应来自该域名的请求。

3. root /path/to/your/vue-app/dist;
   设置 Vue 项目的静态资源根目录，通常是 dist 文件夹，这是 Vue 构建后的输出目录。

4. index index.html;
   指定默认的首页文件为 index.html，Nginx 会优先查找这个文件。

5. location / { try_files $uri $uri/ /index.html; }
   这是关键部分，特别是对于单页面应用 (SPA)。它告诉 Nginx 对于所有未找到的 URL 请求，返回 index.html，从而让前端路由接管这些路径。

6. location /api/ { ... }
   如果你的 Vue 应用需要与后端 API 交互，你可以配置一个反向代理，将 /api/ 开头的请求转发给后端服务器。