nginx vue项目部署

# Nginx 配置文件示例，用于部署 Vue 项目

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

    # 设置根目录为 Vue 项目的 dist 文件夹
    root /path/to/your/vue-project/dist;

    # 默认首页
    index index.html;

    # 处理前端路由模式 (history mode)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires max;
        add_header Cache-Control "public, no-transform";
    }

    # 错误页面重定向
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

解释说明：

1. listen 80: 监听 80 端口，表示这是一个 HTTP 服务。
2. server_name: 替换为你的实际域名。
3. root: 指定 Vue 项目的构建输出文件夹（通常是 dist 文件夹）。
4. index: 设置默认首页为 index.html。
5. location /: 这个块用于处理前端路由模式（history mode），确保所有请求都能正确指向 index.html，从而让前端路由正常工作。
6. *location ~ .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$**: 配置静态资源的缓存策略，延长静态资源的缓存时间，提高性能。
7. error_page 404 /404.html: 当发生 404 错误时，重定向到自定义的 404 页面。