vue nginx部署

# Vue Nginx 部署示例配置

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名

    location / {
        root /path/to/your/vue-app/dist;  # 替换为你的Vue应用打包后的dist目录路径
        try_files $uri $uri/ /index.html;  # 这行确保了SPA（单页应用）的路由可以正常工作
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

解释说明：

1. listen 80: 监听80端口，表示Nginx会处理HTTP请求。
2. server_name: 指定服务器的域名，需要替换为你实际使用的域名。
3. location /: 配置根路径的处理方式。
   • root: 指定Vue应用打包后生成的dist目录路径。
   • try_files $uri $uri/ /index.html: 这行非常重要，它确保了Vue的单页应用（SPA）的路由可以正常工作。当用户访问一个路径时，Nginx会首先尝试查找对应的文件或目录，如果找不到，则返回index.html，这样Vue Router可以接管并正确处理路由。
4. error_page 和 location = /50x.html: 配置错误页面的处理方式，当出现500、502、503或504错误时，返回指定的错误页面。

通过以上配置，你可以将Vue应用部署到Nginx服务器上，并确保其路由功能正常工作。