1.nginx安装

2.nginx启动

安装启动，此处不做介绍

3.vue打包

npm/yarn打包命令
最终生成dist文件包

4.nginx配置

若nginx配置过多，可以使用includ，主配置文件包含多个子配置文件
主配置nginx.conf

worker_processes  1;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile      on;

    keepalive_timeout  65;

    include extra/www1.conf;

    include extra/www2.conf;

}

子配置extra/www1.conf

server {

        listen 8000; # 监听端口

        server_name  www.data.com; # 域名

        location / {

             root   /Users/xxx/frontend/dist/; # vue打包文件路径
 
             index  index.html;

             try_files $uri $uri/ /index.html; #目录不存在则执行index.html
        }
        # 后台api，vue路由中统一加了api，
        location /api {
            proxy_pass http://10.27.250.247:8280/art/api/action;
        }
       # 多个后台接口
        location /api/manage {
            rewrite ^/api/manage/(.*) /$1 break; # 路由重写，适配后台api
            proxy_pass http://10.27.0.143:8283;
        }
}

5.nginx重启

平滑重启

nginx -s reload

注意：修改配置文件后最好先检查一下配置文件是否正确，避免重启后出现错误影响正常运行。判断Nginx配置是否正确的命令如下：

//检测指定的配置文件
nginx -t -c /usr/nginx/xxx/nginx.conf

//检测默认的配置文件
nginx -t

6.尝试访问