前后端部署到一台服务器，nginx代理

调用的思路：浏览器访问nginx,跳转到 root下访问dist文件，然后通过dist内的页面触发nginx的proxy_pass 路径去请求后台接口。 注意：前端不用部署在tomcat上，不要在宝塔面板上的软件商店直接安装nginx，连默认首页都访问不到

1、vue项目前端 修改部分

main.js

axios.defaults.baseURL = /study_online_api  //此地址对应nginx代理的location配置，后面有相关配置

vue.config.js

module.exports = {
          
   
  publicPath: /,
  outputDir: dist,//打包后输出
  assetsDir: static,//静态文件输出地址
 }

本地执行npm run build生成打包文件 宝塔面板新建文件 /download/study-online 把打包文件放在宝塔文件的/download/study-online

部署多个前端项目，用root指定公共目录前缀，再配合alias指定dist的全路径，配置文件如下

user  root;
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;
        root   /download;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        #blog
        location /blog {
          
   
            alias   /download/web-blog/dist;
            index  index.html index.htm;
        }
        location /web_blog_api/ {
          
   
            proxy_pass http://121.41.42.236:8089/;
        }
        
        
        location /study {
          
   
            alias   /download/studyonline/dist;
            index  index.html index.htm;
        }
        location /study_online_api/ {
          
   
            proxy_pass http://121.41.42.236:8082/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
          
   
            root   html;
        }
     
    }

}