Nginx部署VUE项目

阳光穿透心脏的1/2处 2022-11-06 06:53 25阅读 0赞

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，是部署前端项目的首选，在 Nginx 中部署 vue 项目的步骤如下：

### 1、原始配置文件如下 ###

worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    	
        keepalive_timeout  65;
    
        server {
            listen       80;
            server_name  localhost;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    
    }

### 2、将前端 Vue 项目打包，将 dist 目录下的全部文件上传至 nginx 的 html 目录下 ###

![test目录][test]  
我这里把 dist 改成了 test，方便多个项目同时部署的时候能够区分开

### 3、修改配置文件 ###

worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    	
        keepalive_timeout  65;
    
        server {
            listen       80;
            server_name  localhost;
    
            location / {
                root   html;
                index  index.html index.htm;
            }
    		
    		# vue项目
    		location /test {
    			alias   /usr/local/nginx/html/test/;
    			try_files $uri $uri/ /index.html;
    			index  index.html index.htm;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    
    }

到 sbin 目录，执行命令重启 nginx

./nginx -s reload

访问部署的 vue 项目，通过 ip/test/ 就可以访问到了

如您在阅读中发现不足，欢迎留言！！！

[test]: /images/20221023/3d695b77de5b4904a05c0da08e1106a0.png