调用的思路:浏览器访问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

2、nginx配置文件
在这里插入图片描述
这里listen:80是nginx监听浏览器访问的端口,localhost 就是服务器地址。
服务器地址是121.41.42.236。
比如我访问地址是121.41.42.236:80,会自动跳转到dist文件下的index页面,然后登录时触发的请求,
如:http://121.41.42.236:80/web_blog_api/web_blog/user/getAllUser 会转发到 http://121.41.42.236:8089/web_blog/user/getAllUser
在这里插入图片描述

部署多个前端项目,用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;
        }
     
    }

}

Logo

前往低代码交流专区

更多推荐