nginx部署vue刷新页面问题

# 配置 Nginx 以解决 Vue.js 单页应用 (SPA) 刷新页面的问题

server {
    listen 80;
    server_name yourdomain.com;

    # 根目录指向 Vue 项目构建后的 dist 文件夹
    root /path/to/your/vue/dist;

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

    # 处理所有请求，将它们重定向到 index.html，确保 Vue Router 的 history 模式正常工作
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置静态资源的缓存策略
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        log_not_found off;
    }
}

解释说明：

1. root 指令：指定 Vue 项目的 dist 文件夹路径，这是 Vue 构建后的静态文件存放位置。

2. index 指令：设置默认首页文件为 index.html，即 Vue 应用的入口文件。

3. location / 块：使用 try_files 指令来处理所有请求。当用户刷新页面时，Nginx 会尝试匹配请求的文件或目录（$uri 和 $uri/），如果找不到，则返回 index.html，从而确保 Vue Router 的 history 模式能够正确工作。

4. 静态资源缓存配置：通过正则表达式匹配常见的静态资源文件（如 JavaScript、CSS、图片等），并设置最长的缓存时间 (expires max)，以提高性能并减少服务器负载。