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

最新推荐文章于 2024-07-02 14:30:58 发布

微风--轻许--

最新推荐文章于 2024-07-02 14:30:58 发布

阅读量6.6k

点赞数 5

分类专栏：运维文章标签： VUE 域名访问不带IP 不带端口代理

本文链接：https://blog.csdn.net/jiangyu1013/article/details/89363135

版权

运维专栏收录该内容

20 篇文章 1 订阅

订阅专栏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

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。）

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