使用 Nginx 来实现动态修改html文件里的 <title>标签内容使用 Nginx 来实现不同客户访问网站时动态修

场景

vue项目发布到线上时，多个客户访问网站时，都是访问同一个服务器下的同一个文件夹里面。如何做到：分享每个客户自己的系统链接地址到微信时，微信聊天窗口显示自己的系统名称。

思考

微信分享链接时，是通过爬虫获取html文件里的title标签内容，来显示到微信聊天界面上了。那只要访问链接时，读取的title标签内容做成可自定义就行。

例如：a客户访问网站链接，title标签里的内容是“a系统”，b客户访问网站链接，title标签里的内容是“b系统“。

实现方案

使用 Nginx 来实现不同客户访问网站时动态修改html文件里title标签，但需要结合 Nginx的 sub_filter 模块来实现动态内容替换。

sub_filter 是 Nginx 的一个模块，可以用于在响应内容中替换字符串。我们可以利用它来动态修改 index.html 中title标签。

以下是具体的实现方案：

修改 index.html

在 index.html 中，使用占位符（例如 {{CUSTOMER_NAME}}）来表示需要动态替换的内容。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{CUSTOMER_NAME}}系统</title>
  <meta property="og:title" content="{{CUSTOMER_NAME}}系统" />
  <meta property="og:description" content="欢迎使用{{CUSTOMER_NAME}}系统" />
  <meta property="og:image" content="https://example.com/logo.png" />
  <meta property="og:url" content="{{CURRENT_URL}}" />
</head>
<body>
  <div id="app"></div>
</body>
</html>

配置 Nginx

在 Nginx 配置文件中，使用 sub_filter 动态替换占位符。

server {
  listen 80;
  server_name example.com;

  location / {
    root /path/to/your/vue/dist;
    index index.html;

    # 启用 sub_filter
    sub_filter '{{CUSTOMER_NAME}}' '$customer_name';
    sub_filter '{{CURRENT_URL}}' '$scheme://$host$request_uri';
    sub_filter_once off; # 允许多次替换

    # 根据请求信息设置客户名称
    set $customer_name "默认客户";
    if ($host ~* "^a\.example\.com") {
      set $customer_name "a";
    }
    if ($host ~* "^b\.example\.com") {
      set $customer_name "b";
    }

    # 如果需要根据 URL 参数设置客户名称
    if ($arg_customer = "a") {
      set $customer_name "a";
    }
    if ($arg_customer = "b") {
      set $customer_name "b";
    }
  }
}

测试

访问 a.example.com，{{CUSTOMER_NAME}} 会被替换为 a。

访问 b.example.com，{{CUSTOMER_NAME}} 会被替换为 b。