一个域名就够了：部署多个项目的终极指南 (5分钟上手)

一、需求背景

• 作为独立开发者，秉持”能省则省“的原则，可以通过一些手段实现同样的效果；
• 在实际的业务开发过程中，确实涉及到这样的场景，如在门户网站开发完成部署测试时给金主爸爸预览的时候，有时候带域名部署，若有修改这时候我们就会将项目划分成多个，这时候xxx.com/v1、xxx.com/v2、xxx.com/v3等等。这样既保留了工作记录，又会给甲方提供一定的情绪价值（讲个笑话，别当真）；
• 公司没钱，资源紧张，域名少，域名临时没有申请下来，不够用。这个时候，我们需要把子项目给做相应的修改。

二、最终效果

示例

• 个人博客网站：https://zhydoc.com
• 鱼总的云图库网站：https://zhydoc.com/picture

三、实现步骤

1、此处默认认为读者已经掌握Nginx部署单个项目的能力

2、子项目的vite.config.js文件的base添加区分其他项目的前缀，比如/picture/，同时在路由文件中也进行相应的修改

3、我说白了，我白说了，其实就是达成的效果就是将‘/’变成‘/picture/’,至于怎么实现，需要根据对应的前端框架的版本以及打包工具进行确定

4、修改nginx配置，以下为关键配置信息

▼
xml
复制代码
location / {
  root   html/main/dist/;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}

location /picture {
  alias  html/picture/dist/;
  try_files $uri $uri/ /picture/index.html;
}

5、检查子项目中，是否有未能够添加到/picture/前缀的需要手动修改一下，添加/picture/前缀

至此，恭喜你学会了：同一个域名下，部署多个项目...