nginx一个域名配置多个项目（vuecli4, 路径区分）

目前有两个项目, 打包后的文件名
gate_charge_web_h5（放在 www.xxx.com/h5page）
iess_car_web_pc（放在 www.xxx.com 根目录）
服务器放置路径

gate_charge_web_h5配置
router/index.js

const router = new VueRouter({
  mode: 'history',
  base: `/h5page/`,// 注意/car/是
  routes
})

vue.config.js

module.exports = {
  publicPath: IS_PROD ? '/h5page/' : '/', // 默认'/'，部署应用包时的基本 URL
  outputDir: 'gate_charge_web_h5', // 生产环境构建文件的目录
}

iess_car_web_pc配置
router/index.js

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

vue.config.js

module.exports = {
  publicPath: IS_PROD ? "./" : "/",
  outputDir: "iess_car_web_pc", 
}

nginx配置

# 省去了一些不相关的配置
server {
    listen 80;

    server_name www.xxx.com;

    # ssl认证重定向
    return 301 https://$server_name$request_uri;

 }

server {
      listen 443 ssl;
      server_name www.xxx.com;
      
      #此处有一些证书配置等不相关的配置
      #后面有关于 alias 与 root 的说明
      
      location ^~ /static/ {
          root /home/eta_car/iess_car_web_pc;
      }
      location / {
          client_max_body_size 100M;
          proxy_set_header Host $host;
          root /home/eta_car/iess_car_web_pc;
          index index.html;
          try_files $uri $uri/ /index.html;
      }

      location ^~ /h5page/static/ {
          alias /home/eta_car/gate_charge_web_h5/static/;
      }

      location /h5page {
          alias /home/eta_car/gate_charge_web_h5/;
          index index.html;
          try_files $uri $uri/ /h5page/index.html;
      }
}

---

root 与 alias【参考来源】

root 实例：

location ^~ /t/ {
     root /www/root/html/;
}

如果一个请求的URI是 /t/a.html 时，web服务器将会返回服务器上的/www/root/html/t/a.html 的文件。

alias 实例：

location ^~ /t/ {
 alias /www/root/html/new_t/;
}

如果一个请求的URI是 /t/a.html 时，web服务器将会返回服务器上的 /www/root/html/new_t/a.html 的文件。注意这里是 new_t，因为 alias 会把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。
注意：

• 使用alias时，目录名后面一定要加"/"。
• alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
• alias只能位于location块中。（root可以不放在location中）