前端采用vue框架，主要介绍在同一个ip+port下（或域名），通过访问不同的子路径部署多个项目

把前端打包好的项目直接放进 nginx/html 目录下面，

下面展示根据不同的路由模式的nginx配置👇

路由采用hash模式

浏览器访问的时候在url后面拼接上要访问的项目子路径即可，会由vue-router接管路由（hash模式），后面的路径跳转、资源访问的操作也都会在子路径下处理，nginx配置很简单。

nginx/nginx.conf 文件的部分配置如下：

server {
        listen        80;
        server_name   www.axample.com;
        #rewrite      ^ https://$server_name$request_uri permanent;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        # 在443端口配置里设置
        location / {
             root html;
             index index.html index.htm;
             try_files $uri $uri/ /index.html; # uri统一资源标志符
        }
}

浏览器访问：

https://www.axample.com/lily/ -> https://www.axample.com/lily/#/home
https://www.axample.com/mimosa/ -> https://www.axample.com/mimosa/#/home

路由采用的都是history模式

不同于 hash模式，History 模式需要服务器的支持，还是通过访问不同的子路径部署多个项目，当浏览器访问项目的时候，会把子路径带上去请求资源，存在找不到资源的情况，所以需要在应用路径和nginx配置上做修改。

1、router.js设置

new Router({
  mode: 'history',
  base: '/mimosa/', 
  routes,
});

base 是应用的基路径，默认值: "/"。

例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 /app/。

2、vue.config.js修改publicPath

如果只修改了router的设置，没有修改publicPath，浏览器地址栏键入 https://www.axample.com/lily/ 首次进入由于vue-router设置的 redirect 会重定向到首页地址，正常显示网页，但是再次刷新的时候，浏览器请求的是重定向过后的地址，静态文件地址指向错乱，404一般来说就是配置和真实的路径不符合，需要指定try_files

publicPath: IS_PROD ? '/lily/' : '/',  // 公共路径

publicPath用法：

publicPath: 部署应用包时的基本 URL，用法和 webpack 本身的 output.publicPath 一致，

但是 Vue CLI 在一些其他地方也需要用到这个值，所以为了保持统一，直接修改 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，

例如 https://www.my-app.com/。

如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。

例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

3、nginx设置

增加子应用的配置

# 443端口配置

location / {
  root html;
  index index.html index.htm;
  try_files $uri $uri/ /index.html;
}
location /lily {
  #alias /usr/local/nginx/html/lily/;#把匹配到的路径重写, 注意要以/结尾
  root /usr/local/nginx/html; #在匹配到的路径前面，增加root基础路径配置
  try_files $uri $uri/ /lily/index.html; # 特定目录，匹配不到文件的话，增加/lily/index.html配置
  index index.html index.htm;
}
location /mimosa {
  #alias /usr/local/nginx/html/mimosa/;
  root /usr/local/nginx/html;
  try_files $uri $uri/ /mimosa/index.html;
  index index.html index.htm;
}

浏览器访问:

https://www.axample.com/lily/
https://www.axample.com/mimosa/

小结

上面讲解了通过访问不同的子路径部署多个前端项目，并结合vue-router的不同路由模式，给出不同的配置。

nginx方面的配置是写在同一个 server 块下的，通过 location 去分发。

也可以通过域名+端口的配置，实现部署多个前端项目，这个时候就需要添加不同的server 块配置了，感兴趣的小伙伴可以自己尝试一下🎁

hash路由模式下，nginx启动静态服务后，root路径下的任何目录、文件都是可访问的，前端webpack打包的时候也不需要设置部署子路径。

history路由模式下，当浏览器访问项目的时候，会把子路径带上去请求资源，存在找不到资源的情况。怎么把nginx目录写成动态的，动态部署前端项目？

2024-05-06更新，nginx目录写成动态的，动态部署

把nginx服务的静态文件做成动态的，实现新建一个目录就部署一个项目的功能，不需要频繁的修改nginx.conf配置。

注意：部署子路径、路由base

1、通过正则表达式匹配部署的目录，用参数接收。

具体步骤如下：

编辑Nginx配置文件： 打开你的Nginx配置文件，通常是在 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。
添加配置规则： 在配置文件中找到 server 块，然后添加一个 location 块，使用正则表达式匹配需要部署项目的目录路径。
配置代理或静态文件服务： 在 location 块内部，根据你的需求配置代理或者静态文件服务。例如，你可以使用 proxy_pass 指令将请求代理到后端服务器，或者使用 root 指令指定静态文件的根目录。

配置示例：

server {
    listen 80;
    server_name example.com;

    location ~ ^/projects/(.*)/ {
        alias /path/to/projects/$1/;
        try_files $uri $uri/ /index.html;
    }

    # 其他配置...
}

在这个示例中，正则表达式 ^/projects/(.*)/ 会匹配所有以 /projects/ 开头的路径，并将其中的项目名称捕获到变量 $1 中。然后使用 alias 指令将请求映射到对应的项目目录下。try_files 指令用于尝试查找请求的文件，如果文件不存在，则会返回 /index.html。

记得在修改配置文件后重新加载Nginx配置，以使更改生效。可以使用以下命令重新加载Nginx：

nginx -s reload

使用正则表达式匹配URL可能会对性能产生一定影响，特别是当规则比较复杂或者匹配的URL数量很大时。因此，在实际应用中，请确保对正则表达式进行优化，并仔细测试性能。

对$1参数有疑惑的可以看我的另一篇文章：juejin.cn/post/711894…

通过正则表达式接收参数，还可以这样写

server {
    listen 80;
    server_name example.com;

    location ~ ^/projects/(?<project_name>[^/]+)/ {
        alias /path/to/projects/$project_name/;
        try_files $uri $uri/ /index.html;
    }
}

(?<project_name>[^/]+) 是一个命名捕获组，它匹配了 URL 中 /projects/ 后面的项目名称，并将其存储在变量 $project_name 中。

2、使用变量结合Nginx的`map`模块或者`Lua`模块来实现

2.1、使用`map`模块动态设置目录路径

可以使用map模块将请求的特定部分映射到不同的目录路径。

示例：

map $1 $project_directory {
    ~^(.*)$ $1;
}

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/root;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/projects/(.*)/ {
        alias /path/to/projects/$project_directory/;
        try_files $uri $uri/ /index.html;
    }
    
    # 接口反向代理
    locaion /api/ {
        #...
    }
}

正则表达式 ^/projects/(.*)/ 中的 (.*) 捕获了请求路径中 /projects/ 后面的所有内容，并将其存储在变量 $1 中。然后，我们使用map模块将这个变量映射到另一个变量 $project_directory 中。最后，我们在location块中使用了动态的$project_directory变量来设置目录路径

访问：

www.example.com/dist
www.example.com/dist01
www.example.com/test

2.2、使用Lua模块动态设置目录路径

首先，你需要安装Nginx的Lua模块，然后，在Lua脚本中处理请求，并动态设置目录路径。

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/root;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/projects/(.*)/ {
        set $project_directory '';
        rewrite_by_lua_block {
            ngx.var.project_directory = ngx.re.match(ngx.var.uri, "/projects/(.*?)/")[1];
        }
        alias /path/to/projects/$project_directory/;
        try_files $uri $uri/ /index.html;
    }
}

在location块内部使用了rewrite_by_lua_block指令，该指令允许我们使用Lua脚本来处理请求。在Lua脚本中，使用Nginx的Lua API来提取URI中的项目名称，并将其存储在Nginx的变量中。然后，我们可以将这个变量用于动态设置目录路径。

我是 甜点cc，个人网站: blog.i-xiao.space/

做人做事在于扬长而不是补短

公众号：【看见另一种可能】

nginx部署多个前端项目