Nginx 部署vue项目

1. vue项目打包

常用方式为 
执行 npm run build
项目结构下生成dist包

2. 将dist文件下的内容部署在nginx上

open /usr/local/var/www
将dist文件下的内容拷贝进来

3. 更改配置文件

open /usr/local/etc/nginx/
打开nginx.conf文件，按需修改

4. 基本修改如下

 
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
 
    keepalive_timeout  65;
	
    server {
        listen       7777;
        server_name  127.0.0.1;

        location / { ## 前端项目
            root   /usr/local/var/www;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /prod-api/ { ## 后端项目 - 管理后台
            proxy_pass http://127.0.0.1:8888/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }

    gzip on;
    gzip_min_length 1k;     # 设置允许压缩的页面最小字节数
    gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果
    gzip_http_version 1.1;  # 识别 HTTP 协议版本
    gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定压缩类型
    gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩

    include /etc/nginx/conf.d/*.conf; ## 加载该目录下的其它 Nginx 配置文件
}