server {
    listen       80;#前端监听端口
    server_name  localhost;#代理服务地址
    
    root /home/app/vuecli/dist;   #设置根目录！即存放你build后前端代码的地址

    location / {
        autoindex on;       #开启nginx目录浏览功能
        autoindex_exact_size off;   #文件大小从KB开始显示
        charset utf-8;          #显示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
    }

    #开始配置我们的反向代理
    location /api{    #"/api"中的api可以替换为自定义的任何内容
    rewrite ^/api/(.*)$ /$1 break;    #重点！把接口头部为/api的请求头重写替换为$ $1中的内容，如此处前端请求接口为/api/login,将重写代理成/login
    include uwsgi_params;
    proxy_pass http://localhost:8080;   #nginx默认监听80,需要反向代理到8080或者自定义端口
    charset utf-8;   #显示中文
        add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
        add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}

以上为案例展示

使用shell命令更改conf文件的话，进入vi编辑器后输入i进入编辑 ,esc命令退出编辑，:wq!命令保存并退出vi编辑器

location [ = | ~ | ~* | ^~] uri {

}
（1）、= ：用于不含正则表达式的 uri 前，要求请求字符串与 uri 严格匹配，
		如果匹配成功，就停止继续向下搜索并立即处理该请求。
（2）、~：用于表示 uri 包含正则表达式，并且区分大小写。
（3）、~*：用于表示 uri 包含正则表达式，并且不区分大小写。
（4）、^~：用于不含正则表达式的 uri 前，要求 Nginx 服务器找到标识 uri 和请求
		字符串匹配度最高的 location 后，立即使用此 location 处理请求，
		而不再使用 location块中的正则 uri 和请求字符串做匹配。

以上为location 指令说明

该指令用于匹配 URL

宝塔地址（图形界面操作）

http://101.43.247.47:8888/01d784f4

小建议：在vue中配置代理了，尽量用原有的api前缀来代替，否则如果不是前后端一起协同的话，上线部署时很容易跨域失败

我在宝塔中的配置

server
{
    listen 9000; # 打开了9000端口，同时确定服务器安全组该端口打开
    server_name 101.43.247.47; # 服务器ip地址
    index index.php index.html index.htm default.php default.htm default.html; # 不用改
    root /www/wwwroot/Mall; # 项目存放目录
    
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-56.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/101.43.247.47.conf; # 不用改
    #REWRITE-END
    location /api{ 
        proxy_pass http://39.98.123.211; # 反向代理地址1
    }
     location /ncov{ 
        proxy_pass http://api.tianapi.com; # 反向代理地址2
    }
     location /springTravel{ 
        proxy_pass http://apis.juhe.cn; # 反向代理地址3
    }
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) # 不用改
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{ # 不用改
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ # 不用改
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    location ~ .*\.(js|css)?$ # 不用改
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null; 
    }
    access_log  /www/wwwlogs/101.43.247.47.log; # 不用改
    error_log  /www/wwwlogs/101.43.247.47.error.log; # 不用改
}