前端VUE工程不占用80端口，浏览器不带端口访问VUE项目的实现

微风-- 轻许--

发布于 2022-04-13 16:31:04

1.6K0

发布于 2022-04-13 16:31:04

文章被收录于专栏：java 微风java 微风

1.需求：直接域名访问项目，不用IP，也不带端口号。

1）访问项目方法通常是 IP：端口，不想带端口时可把这个工程部署在80端口上，这样可以默认80，URL上不用写端口号。

2. 不用把前端工程部署在80端口上。

1）把前端工程部署在3000端口上，后端工程部署在8089上，由 nginx 监听 80 端口并作代理。

2）nginx.conf 配置：

server {
        listen       80;
        server_name  ergouzi.fun; # 域名或者服务器IP

	
	location / {
	        root   /usr/local/dist; # vue项目dist所在路径
       	        index  index.html index.htm;
        }
	
	location /gentle/ {  # gentle 是后端工程名，可区分不同后端工程  
		proxy_pass  http://localhost:8089;  # 后端工程请求地址  
	}

	location /dagouzi/ {   # dagouzi 是另一后端工程    
		proxy_pass  http://localhost:8088;    
		proxy_set_header X-real-ip $remote_addr;    
		proxy_set_header Host $http_host;
	}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

这样，服务器根本不用对外开放 3000、8089、8088 这些端口。

浏览器上直接访问 server_name 中配置内容就可以了。比如，我这就是直接访问：ergouzi.fun。

（PS：ergouzi.fun 我这个域名还未备案通过，目前尚只能访问对应IP。）

补充：前端请求后端接口方式为：