作为前端开发者或运维人员，你大概率遇到过这样的苦恼：手里有多个前端项目要上线，但域名资源有限，总不能为每个小项目都单独申请一个域名吧？其实 Nginx 早就为我们提供了优雅的解决方案 —— 在同一个域名或者同一个端口下，通过目录区分的方式部署多个前端项目。本文就以实际案例，手把手教你完成整个配置流程。

一、前端项目配置 publicPath

不同前端框架（Vue/React/Uniapp）的 publicPath 配置位置略有差异，但核心原理一致 —— 让项目的所有静态资源请求都基于指定的子目录。以 VUE 项目为例，在 vue.config.js 配置文件中添加 publicPath 配置

// vue.config.js
module.exports = {
  // 关键配置：指定项目的公共路径，对应 Nginx 的 location 目录
  // 比如luck-uniapp项目，publicPath设为/luck-uniapp/
  publicPath:  '/luck-uniapp/' 
}

加上公共路径后，访问前端应用就必须带上这个前缀了，比如原本用 http://localhost:8080 就能访问的应用，加上 publicPath 后就要通过 http://localhost:8080/luck-uniapp 才能访问
修改好配置后，重新打包项目

二、Nginx 配置与项目部署

先在 Nginx 的 html 目录下新建 luck-uniapp 文件夹，然后将打包好的前端项目放进去

html/
├── luck-uniapp/                    # 前端项目luck-uniapp 
│   ├── index.html            			 
├── luck-product-web/               # 前端项目luck-product-web
│   ├── index.html            			 

如何让路径不同的请求走进对应的项目呢？比如让 http://localhost:8080/luck-uniapp 访问 luck-uniapp 目录的资源，让 http://localhost:8080/luck-product-web 访问 luck-product-web 目录的资源。这个问题可以通过修改 Nginx 配置来解决

# 进入 Nginx 的 conf 目录
# 编辑 Nginx 配置文件
vi nginx.conf

# 找到需要调整的端口，添加 location 映射
    server {
        listen       443 ssl;
        server_name  www.quzhe.top;

  
		# 添加 luck-uniapp 目录映射
		location /luck-uniapp/ {
		  # 请求映射到 htm l对应的前端项目所在目录
			alias  /home/soft/nginx/html/luck-uniapp/;
			index  index.html index.htm;
			try_files $uri $uri/ /luck-uniapp/index.html;
			# 日志路径可自定义
			access_log  /home/soft/nginx/logs/luck-uniapp/access.log;
			error_log  /home/soft/nginx/logs/luck-uniapp/error.log;
		}

		# 添加 luck-product-web 目录映射
		location /luck-product-web/ {
		  # 请求映射到 html 对应的前端项目所在目录
			alias  /home/soft/nginx/html/luck-product-web/;
			index  index.html index.htm;
			try_files $uri $uri/ /luck-product-web/index.html;
			# 日志路径可自定义
			access_log  /home/soft/nginx/logs/luck-product-web/access.log;
			error_log  /home/soft/nginx/logs/luck-product-web/error.log;
		}
	
   }

# 保存配置文件后，重启 Nginx
sudo systemctl restart nginx

重启 Nginx 后就可以在同一个域名/端口下访问多个前端项目了

三、学习交流

链接: Java-AI学习交流
一个人的精力是有限的，没有那么多的时间去探索新的事物，加入一个交流群就相当于增加了一个接触新事物、新想法、新机会的渠道，这就是交流群存在的意义，期待你的加入！