Vue项目生产环境Nginx配置

1.关键配置代理和开启gzip压缩（nginx版本 http://nginx.org/download/nginx-1.22.0.zip）

http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    # 开启gzip
    gzip  on;
    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length  1024;
    gzip_buffers  8 16k;
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level  3;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6]\.";
    # gzip压缩文件类型
    gzip_types text/plain text/css text/javascript image/jpeg image/gif image/png application/json application/javascript application/x-javascript application/xml 
	application/xml+rss application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

    server {
        listen       8888;
        server_name  192.168.31.145;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            root   html/project/dist;
            index  index.html index.htm;
        }

	location /api {
           proxy_pass http://api.xmyfsj.net;
        }
}

2.项目配置截图

从上往下，依次是

1.开启gzip压缩

2.更改成局域网ip方便手机调试

3.配置后端接口代理