vue3部署到nginx

# 配置 Vue 3 应用到 Nginx 的示例

server {
    listen 80;
    server_name yourdomain.com;

    # 根目录指向 Vue 3 构建后的 dist 文件夹
    root /path/to/your/project/dist;
    index index.html;

    # 处理所有路由请求，将它们重定向到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

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

解释说明：

1. listen 80;
   监听 80 端口，表示这是一个 HTTP 请求。

2. server_name yourdomain.com;
   指定服务器的域名，将其替换为你的实际域名。

3. root /path/to/your/project/dist;
   设置根目录为 Vue 3 构建后的 dist 文件夹路径。你需要将 /path/to/your/project/dist 替换为实际的路径。

4. index index.html;
   指定默认索引文件为 index.html。

5. location / { try_files $uri $uri/ /index.html; }
   这是处理前端路由的关键配置。它会尝试匹配请求的文件或目录，如果找不到则返回 index.html，从而让 Vue Router 正常工作。

6. 可选的静态资源缓存配置
   对于常见的静态资源（如 JavaScript、CSS、图片等），设置缓存策略以提高性能。

如果你在部署时遇到问题，确保你已经正确构建了 Vue 3 项目，并且 Nginx 配置文件没有语法错误。