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

﹏ヽ暗。殇╰゛Y 2022-02-18 16:07 631阅读 0赞

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

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

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

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

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

![20190417200247340.png][]

![20190417200359857.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://www.captainai.net/jiangyu1013/
[20190417200247340.png]: /images/20220218/6a821ab6bd3d4dfcb552eab5b3ac4135.png
[20190417200359857.png]: /images/20220218/e9fd19f153f0417a8d04aebc5c7a5ca1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220218/a54f2875869841f984d8505d02c56fe4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220218/d0ab95edbc8a43d59628cf7aaa52a1ff.png