nginx - 通过反向代理配置vue项目

一, 下载安装nginx .

1,nginx官方网址: http://nginx.org/en/download.html

根据自己的服务器类型下载对应的nginx

2,解压下载的nginx到你要安装的目录.打开编辑conf文件夹下的nginx.conf文件.

把更改配置为:

# 默认以 nobody 运行nginx，如果出现权限不足的情况可以修改 nobody 未 root 并放开注释。
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
    #隐藏Nginx版本信息，禁止网站目录浏览
    server_tokens off;
    
    server {
        listen       80;
        server_name  www.xxxx.com; #网站域名(如果服务器是国内的还需要进行域名备案.)

         #编码格式
        charset utf-8;
        
        #代理配置参数
        proxy_connect_timeout 180;#连接超时时间
        proxy_send_timeout 180;#发送请求超时时间
        proxy_read_timeout 180;#读取请求超时时间
        proxy_set_header Host $host;#设置转发请求头
        proxy_set_header X-Forwarder-For $remote_addr;
        
        #反向代理的路径（和projectName绑定），location 后面设置映射的路径
        location  /projectName {
            proxy_pass http://127.0.0.1:8080/projectName;
            proxy_http_version 1.1;#http协议版本
            proxy_set_header Upgrade $http_upgrade;#websocket相关
             proxy_set_header Connection "upgrade";
        }
        
       
    }

    server {
        listen       8080;
        server_name  localhost;
        
        root   D:\xx\xxx;#项目根目录

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #projectName为项目名称,也是文件夹名称
        location /projectName {
            try_files $uri $uri/projectName /projectName/index.html;
            index  projectName/index.html projectName/index.htm;
        }
        location @router {
            rewrite ^.*$ /projectName/index.html last;
        }

    }

}

3,启动或者重新加载nginx配置.

在nginx解压的根目录打开命令行窗口(即cmd窗口)

        启动: start nginx

        停止: start -s stop

        重新加载配置: start -s reload