前后端分离项目，ngnix如何在一台服务器部署多套前端代码

最新推荐文章于 2025-11-17 10:37:34 发布

原创最新推荐文章于 2025-11-17 10:37:34 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ngnix #前端

vue.js 同时被 2 个专栏收录

24 篇文章

订阅专栏

前段环境搭建

5 篇文章

订阅专栏

本文详细介绍了如何通过Nginx配置实现多个Vue项目在同一服务器上的部署，包括前端路由配置、静态资源缓存策略及二级域名的设置方法。

首先是ng的配置：


server
    {
        listen 80 default_server reuseport;
        #listen [::]:80 default_server ipv6only=on;
        server_name _;
        index index.html index.htm index.php;
        #root  /home/wwwroot/default;
        root  /home/wwwroot/dist; //指向第一套前端代码

        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }

        include enable-php.conf;

        location /nginx_status
        {
            stub_status on;
            access_log   off;
        }

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }
        //这里配置第二套前端代码
        location /m/ {
            try_files $uri $uri/ /m/index.html;
            index index.html index.htm;
        }
		//这里配置第三套前端代码
	location /mperson/ {
            try_files $uri $uri/ /mperson/index.html;
            index index.html index.htm;
        }

        access_log  /home/wwwlogs/access.log;
    }

二，vue项目中也需要相应的改为ng里的前缀

1.index.html中头部加入<meta base="/m/">

2.router的index中加入base: '/mperson/',

3.config的index中assetsPublicPath改为ng的前缀,如:assetsPublicPath: '/m/', 注意：build和dev中都要改

第二种方式是使用二级域名的方式：

首先启动二级域名，不同的二级域名给不同的项目

server {
    listen    80;
    server_name example.com;
    location / {
       proxy_pass     http://localhost:8080;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

项目1

server {
    listen    80;
    server_name project1.example.com;
    location / {
       proxy_pass     http://localhost:8081;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

项目2

server {
    listen    80;
    server_name project2.example.com;
    location / {
       proxy_pass     http://localhost:8082;
       proxy_set_header  Host       $host;
       proxy_set_header  X-Real-IP    $remote_addr;
       proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}