nginx配置vue项目

# nginx配置vue项目

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

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

    # 配置静态资源路径
    root /path/to/your/vue-project/dist;  # 替换为你的Vue项目打包后的dist目录路径

    location / {
        try_files $uri $uri/ /index.html;  # 解决Vue路由模式下的404问题
    }

    # 可选：配置代理（如果你的后端API和前端不在同一个服务器上）
    location /api/ {
        proxy_pass http://backend_server_address;  # 替换为你的后端API地址
        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端口，表示HTTP请求会通过这个端口进入Nginx。
2. server_name yourdomain.com: 设置服务器名称，替换为你的实际域名。
3. index index.html: 设置默认首页文件为index.html。
4. root /path/to/your/vue-project/dist: 设置静态资源根目录，指向Vue项目的打包输出目录（即dist目录）。
5. location /:
   • try_files $uri $uri/ /index.html: 这行代码的作用是尝试匹配请求的文件或目录，如果找不到则返回index.html。这可以解决Vue项目中使用HTML5 History模式时的404问题。
6. location /api/ (可选):
   • 如果你的后端API和前端不在同一个服务器上，可以通过这个配置将/api/开头的请求代理到后端服务器。
   • proxy_pass http://backend_server_address: 将请求转发到指定的后端服务器地址。
   • 其他proxy_set_header指令用于传递一些必要的头部信息给后端服务器。