Nginx配置同域名下多个Vue项目

最新推荐文章于 2025-07-01 15:31:34 发布

正经男大学生BRLF

最新推荐文章于 2025-07-01 15:31:34 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架工具

本文链接：https://blog.youkuaiyun.com/u011554976/article/details/90959482

本文介绍了如何使用Nginx配置同一域名下管理多个Vue项目。通过设置不同的端口或同端口不同目录的方式，实现多个Vue应用的独立访问。详细讲解了配置文件的编写，包括监听不同端口的项目配置和同端口下通过二级目录区分项目的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Nginx配置同域名下多个Vue项目

开始捣鼓nginx配置，我采用的是分文件的方式捣鼓的:

首先nginx.conf文件中include所有的配置进来：

http {
	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	include /etc/nginx/mime.types;
	default_type application/octet-stream;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
	ssl_prefer_server_ciphers on;
	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
	gzip on;
	gzip_disable "msie6";
    
  
	include /etc/nginx/conf.d/*.conf; #这一句将conf.d目录下的所有conf配置文件引入
}

然后在conf.d目录下创建每个项目对应的nginx配置文件

1、通过多端口实现

这个其实很简单，通个域名不同端口进入不同项目，只需要nginx监听对应的端口然后指定对应的目录就好，代码如下

对于项目一我们希望通过默认域名进入，即绑定80端口:

####项目一nginx配置文件	

server {

        #访问端口(页面访问端口)
        listen 80;
        server_name xxx;

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