带有 nginx 的子目录上的 Vue 前端应用程序答案

【问题标题】：Vue frontend app on subdirectory with nginx带有 nginx 的子目录上的 Vue 前端应用程序
【发布时间】：2021-05-28 19:23:04
【问题描述】：

我有一个 nuxt 应用程序部署为使用 nginx 反向代理的主网站。设置如下所示

location / {
    proxy_pass http://127.0.0.1:3000;
}

现在我在同一台服务器上有另一个 vue 应用程序，我想在子路径上运行，例如https://www.app.com/dashboard

下面是我对 nginx 和 vue 路由器的设置

location ^~ /dashboard {
    alias /srv/www/dashboard-app/dist;
    try_files $uri $uri/ /srv/www/dashboard-app/dist/index.html;
}

const router = createRouter({
  history: createWebHistory('/dashboard'),
  routes,
})

当我访问 /dashboard 时，我能够加载我的主仪表板，并且 vue 应用程序呈现正常。

但是，如果我访问子路径，例如/dashboard/team 似乎 nginx 与我的仪表板路径不匹配，它将请求传递给位于 / (root) 上的 nuxt 应用程序，该应用程序返回抛出 404 为在我的 nuxt 应用中有与 /dashboard/team 匹配的路径

【问题讨论】：

标签： vue.js nginx vuejs2 nuxt.js nginx-reverse-proxy

【解决方案1】：

try_files 的最后一个参数可以是=status_code 或uri。当它是uri 时，它将再次与定义的位置块匹配。在您的情况下，它与默认路由匹配，即 nuxt 代理。

以下配置应该适合您。


server {
    listen 80;

    root /srv/www/dashboard-app/dist;

    location ~ ^/dashboard(.*) {
        # we want to remove the dashboard prefix and match the static file requests
        # or serve the /index.html route.

        try_files $1 /index.html;
    }

    location = /index.html {
        # this should not be a public url
        # this should only be served when it is requested internally
        internal;
    }

    # add any other static file extensions that you want to serve
    location ~ (\.css|\.js)$ {
        internal;
    }

    location / {
        # best to include this
        include proxy_params;
        proxy_pass http://127.0.0.1:3000;
    }
}

【讨论】：

【解决方案2】：

似乎我的仪表板 nginx 块中缺少尾部斜杠！工作解决方案如下

location ^~ /dashboard {
    alias /srv/www/dashboard-app/dist/;
    try_files $uri $uri/ /index.html = 404;
}

【讨论】：