nginx部署前端(vue)项目及配置修改

# 定义 Nginx 的用户和用户组
user nginx;
 
# 启动进程, 通常设置成和CPU的核数相等
worker_processes auto;
 
# 全局错误日志定义类型，[ debug | info | notice | warn | error | crit ]
error_log /var/log/nginx/error.log warn;
 
# PID 文件，记录了Nginx 的主进程的PID
pid /var/run/nginx.pid;
 
# 一个进程能打开的最大文件描述符数目
worker_rlimit_nofile 65535;
 
# 事件模块
events {
    # 使用的事件模型，如：kqueue, epoll, rtsig等
    use epoll;
    # 每个进程的最大连接数
    worker_connections 65535;
}
 
# HTTP 服务模块
http {
    include       /etc/nginx/mime.types; # 文件扩展名和类型映射表
    default_type  application/octet-stream; # 默认文件类型
 
    # 设置日志模式
    access_log /var/log/nginx/access.log;
 
    # 设置nginx是否调用sendfile函数传输文件，对于普通应用设为 on，如果是用来进行下载等IO重负载的应用，可设置为off
    sendfile on;
    # 开启tcp_nopush，使得nginx在一个数据包里发送头信息，而不是一个接一个的发送
    tcp_nopush on;
    # 设置客户端连接的超时时间
    keepalive_timeout 65;
 
    # 设置gzip压缩
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
 
    # 虚拟主机
    server {
        # 监听的端口
        listen 80;
        # 主机名
        server_name localhost;
 
        # 位置定义
        location / {
            # 前端项目的根目录
            root /usr/share/nginx/html;
            # 默认首页文件
            index index.html index.htm;
            try_files $uri $uri/ /index.html; # 用于支持 Vue Router 的 history 模式
        }
 
        # 静态文件，比如图片、CSS、JavaScript 等直接传输
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot)$ {
            expires 7d; # 设置静态文件缓存时间
            add_header Cache-Control "public";
        }
 
        # 错误处理页面
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }
    }
}

这个配置文件主要展示了如何设置Nginx来作为一个静态文件服务器来托管Vue.js项目。它包括了基础的日志配置、性能优化选项，以及一个简单的server块来定义如何处理到来的Web请求。try\_files指令用于支持单页面应用(SPA)的路由，如果找不到文件，则回退到index.html，这是Vue Router的history模式所必需的。此外，它还展示了如何设置静态文件的缓存来提高性能。