在nginx的html中本地部署多个Vue项目

前言：

在学习与工作的过程中，部署单个项目往往不够，所有需要同时在nginx的html文件夹下部署多个项目，我自己找了许多文章，但可能我理解的不太到位，最后还是请教学长后自己摸索了一番，下面，我来讲讲具体实现

1.修改conf

第一步肯定得修改nginx的conf配置文件（可以先启动nginx）

我的域名还在备案中，所以只局限在本地服务器（127.0.0.1）上部署多个项目

在conf中复制 server，修改监听端口号

server {
            listen       8082;          
            server_name  localhost;

            location / {
                root   html/b;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }

            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

把server复制后直接粘贴到原来的server的下面，需要几个端口就复制几份

这里的 listen 表示为监听的端口，默认为80

server_name 通常情况下是不同的域名，这里只在本地服务器上展示，所以不用修改（保留localhost），如果有服务器且域名备案成功的伙伴可以把后面的值改成二级或三级域名（自己命名），例如 xxx.xxx.com

下面的 location / 里的 root 表示打包文件的路径，html/b 表示 html文件夹下的b子文件夹

自己可以定义不同的文件夹，以区分不同的项目

如果刷新报错需要在 server的 location / 添加代码

我的另一篇文章有具体解释

try_files $uri $uri/ /index.html;

2. 重新加载配置文件

注意，在每一次修改conf之后，都要在命令行运行命令，不然修改无法生效

nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx

3.注意查看端口是否被占用

在我复制server 进行重新配置的时候，我添加了一个8082 端口，但一直刷新浏览器，一直报错

，当时我以为nginx犯病了，后面想到了可能存在端口占用问题

检查端口是否被占用，命令行执行 netstat -ano ，本地地址后面的端口就是已经被占用了

我查看之后发现果然8082端口被占用，虽然我不知道被什么占用

检查指定端口（80）是否被占用的命令是，可以把后面的端口号改成指定端口号

netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"

注意：

上文只是在本地服务器完成多个项目的部署，如需在服务器部署直接把修改好的conf文件复制过去，如果有备案好的域名则可以通过修改 server_name 添加不同的域名

这里只是通过不同的端口号访问不同的项目

（例如 127.0.0.1:8081），可以加 8082 ，8083 ......，

但要确保root 下指定的是正确的打包好的文件夹

总结：

1.首先修改conf，复制 server 修改相关信息

2.修改之后需要重新加载nginx ，命令行执行命令 “nginx -s reload”

3.确保修改的端口没有被占用

本人是初次接触nginx的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124695178?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124695178%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=mDIg6

在nginx的html中本地部署多个Vue项目

Linux相关栏目本月热门文章