本次采用了两个纯前端项目作为演示：

1. vue-color-avatar
2. svg-loaders

想要达到的效果：

1. https://www.example.com/svg 访问 svg-loaders 项目
2. https://www.example.com/avatar 访问 vue-color-avatar 项目

server {
  listen 80;
  server_name localhost;
  
  location ^~ /svg {
    alias /usr/local/var/www/svg-loaders;
    index index.html;
  }
  
  location ^~ /avatar {
    alias /usr/local/var/www/vue-color-avatar;
    index index.html;
  }
}

因为想要实现访问 /avatar 时，返回 vue-color-avatar 项目的首页，所以使用了 alias 而不是 root， 它俩的区别在于如何处理 location 后面的匹配字符串。例如访问 https://www.example.com/avatar/favicon.svg 时， root 会将 root 值和 location 匹配字符串的值拼成一个路径，然后去这个路径下查找资源，而 alias 会使用 alias 的值覆盖掉 location 匹配字符串的值形成一个路径，然后去这个路径下查找资源。alias 可以理解为 location 匹配字符串的别名。

# 返回 /usr/local/var/www/vue-color-avatar/avatar/favicon.svg
root /usr/local/var/www/vue-color-avatar
# 返回 /usr/local/var/www/vue-color-avatar/favicon.svg，/avatar 被 alias 整个替换掉了
alias /usr/local/var/www/vue-color-avatar

还有一点需要注意，就是前端项目的 publicPath 路径，因为我们是通过不同的路由访问不同的项目的， 因此前端项目打包时需要加上一个公共路由前缀，如果前端项目使用的是 vite，对应的配置字段是 base：

export default defineConfig(({ mode }) => ({
  base: '/avatar',
  ...
}))