Vue项目介绍

重点介绍 : 下面的配置在Nginx部署过程中是没用的, 不需要考虑这部分的内容的!

上述内容是Vue请求代理, Vue运行时会对请求进行代理, 将 /api 替换为 ‘’

比如假如请求是 /api/login/auth 的话 会被代理替换为 http://localhost:9000/login/auth

项目在构建的时候一定要注意请求的环境 比如 /api/login 或者 /dev/login

Nginx配置

#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  0;
    keepalive_timeout  65;

    #gzip  on;
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            # proxy_pass http://localhost:9000;
            index  index.html index.htm;
        }

        # 注意 http://localhost:9000/ 和 http://localhost:9000的区别
        location /api/ {
            proxy_pass https://mock.apipost.cn/app/mock/project/e0dee720-5cc9-4fbe-b418-7967ebbbbc7d/;
        }

        location /activation {
            proxy_pass http://localhost:9000;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

注意这个 listen 80; 这个配置是监听 80 端口, 我们部署后访问的端口就是这个

如果 listen 8080; 我们访问的路径就是 localhost:8080

另外就是反向代理的 配置, 如下 :

location /api/ {
     proxy_pass http://localhost:9000/;
}

比如我们当前的请求是 http://localhost/api/login/auth 根据上面的配置, 我们的请求路径就会被反向代理到 http://localhost:9000/login/atuh

注意 : 反向代理配置中 http://localhost:9000/ 和 http://localhost:9000区别

前者代理后的请求路径是 http://localhost:9000/login/atuh

后者是 http://localhost:9000/api/login/atuh

Nginx部署项目

这部分其实没什么要说的, 很简单 Vue项目打包后会生成一个 dist 目录, 将目录里面的代码放到

放到上面的目录, 然后配置下 nginx.conf 就可以了