时间戳

首页 > 解决方案 > nginx反向代理背后的Nuxt.js应用程序一次加载多个页面

vue.js - nginx反向代理背后的Nuxt.js应用程序一次加载多个页面

问题描述

我在 nginx 反向代理后面有一个 nuxt.js 应用程序。nginx 配置文件如下所示：

  server {
    listen 80;
    # Match *.lvh.me
    server_name  ~^(?<user>.+)\.lvh\.me$;

    location / {
      proxy_pass http://localhost:8080/sites/$user$uri$is_args$args;
    }

    location ~* \.(?:js|css|jpg|jpeg|gif|png|ico|cur|svg)$ {
      proxy_pass http://localhost:8080;
    }

  }

如您所见，我将所有站点子域映射到站点上的特定路径，并且运行良好。我还在映射要从根加载的所有资产（因为否则它会引发 404 错误）。

我面临的唯一问题是，每当我访问一个子域e.g subdomain.lvh.me时，它会加载两个页面，一个是来自子域根目录的原始页面（这是预期的），还有来自主域根目录的页面i.e. lvh.me（不是预期的） .

你能检查一下我的 conf 文件，看看我在这里做错了什么吗？

标签： vue.jsnginxreverse-proxynuxt.js

解决方案

所以我遇到了这个问题，我解决它的方法是不依赖 Nginx 的rootnor proxy_pass. 相反，我使用了一个带有别名和try_files内部的位置块，如下所示：

location ^~ / {
        alias /path/to/dist;
        try_files $uri $uri/ /index.html = 404;
}

推荐阅读