教你怎么在一个 nginx 下部署多个 vue 项目? #vue

小技能：教你一个nginx怎么部署多个vue项目？

大家好，之前我们讲了一下在nginx下怎么部署vue的项目，然后有同学私信我说怎么在nginx下同时部署多个vue的项目，今天给大家介绍一下。

就是先准备一下数据，这里准备了一个vue项目，project1。再准备了一个项目叫project2。先分别把这两个项目起起来，一个是5174，一个是5173。浏览器访问就是这个界面，一个是5173。

5173这个项目访问的是商品列表请求后台的商品列表，把它展示出来，然后5174同样是请求商品分类，把它给展示到页面。这两个项目如果要同时部署到nginx怎么去部署？我们来看一下。

就是先打开vue的配置，平常部署vue项目就会定义一个server，这个server会监听80端口。首先配一个location，这个location的地址就是比如现在是项目1，项目1打包后dist的文件的目录。配完之后再配一个API接口，这样就可以实现这个页面的访问了。

要是弄两个，同样可以再起一个Server，比如说这里已经写好了起一个81的端口的server，然后81监听的是location的地址，是vue项目2打包出来的地址。这样就实现了两个端口，一个80，一个81，同时去部署两个项目project1。然后把nginx刷新一下。

看下效果，访问80端口，它就会展示出项目1的地址，然后同样的，访问81端口，81端口也正常，把项目2的给展示出来，说明部署是没有问题的。

但是这样有一个问题，就是这个项目是分成两个端口去访问的，一个是80一个81。假设只有一台服务器，那服务器只想暴露一个80端口，同样通过一个端口，部署两套vue的项目。再来看一下首先要做的第一点，假设现在要把vue2的81的项目部署到这个地址，比如说8180，我们通过这样去访问，这样让它能访问到项目2。

怎么去部署？首先要做第一步，就是在项目2里面找到vite config，vite config里面有个打包配置，打包配置里面有个base。找到base之后配一个静态资源的前缀，资源前缀目录就得把它配成vue2，也就是说后面访问的时候是通过80/vue2访问，就不直接通过81访问了。

第一步、把这里去做一个配置，就打包好的静态资源。完了之后对项目2进行打包，执行npm run build，等它去打包。这个过程稍微慢点，稍微等待一下，这里已经打包好了，打包后的路径就在diss的底下，打开一下是目录，这个目录把路径就可以粘出来。

首先这种方式就不可取了，可以把它删掉。

最后需要做什么？需要的同样是配80端口，比如说这个是80改成80，80端口同样的第一个location还是这个root地址配成项目1的打包后的地址，但是还要配一个vue端口，vue2的访问路径，这个路径我们配成刚才项目2，项目2打包后的路径，这里就不能用root了。这里要用这个alias指定路径的别名。同样的这个就不能用index，需要用到try files，try files加上Suri，一个变量，然后让它直接指向到index.html，也就是说最后会指向到这个路径下的index.html。

一定要注意，首先这里是要配成/vue2，最后要保证通过这样去能访问到。然后再一个就是我们这里设有千里迢迢和try files，和上面的route和index不一样的，那接口的/api的代理是配的没有问题的。我们到本地的8761的端口上。

通过这样配置之后，我们把这个ng一下，看一下能不能通过直接访问80端口。通过路径是根路径，同时访问项目1和项目2。我们试一下，把这个ng再重启一下。重启没有问题，没有报错，说明配置没有问题。然后访问一下localhost：80。我们看一下效果。把这个关掉，访问一下jpg是商品列表，商品列表已经正常展示了，商品列表展示说明项目1就没有问题了。

然后我们再去访问项目2，我们就要vue2，看项目2，这个项目2展示出来商品分类了，这是项目2的商品分类，说明这个也是没有问题的。然后这样就实现了通过同一个端口的不同访问路径，代理到这个不同的vue项目上。

这个典型的应用，就是说比如前台有一个智门户的网站，还有一个管理系统的网站。我们智门户的网站可能就是不带路径的，直接去访问。然后管理系统的网站可能会加一个admin或者之类的。通过同样的端口，不同的路径就实现了不同vue项目的访问。

OK，今天的分享就到这里，谢谢大家，点击关注。