vuejs nginx 子目录部署刷新 404

Question

我已经用这些配置配置了我的 nginx

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }

  location /apps/ {
    try_files $uri $uri/ index.php;
  }

我的npm run build的结果是重命名mv dist apps

第一个路由器路径'/'将重定向到/login路径

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior() {
    return { x: 0, y: 0 }
  },
  routes: [
    {
      path: '/',
      name: 'auth-login',
      component: () => import('@/views/pages/authentication/Login.vue'),
      meta: {
        layout: 'full',
        resource: 'Auth',
        redirectIfLoggedIn: true,
      },
    },
  ]

所以当我去www.subdomain.maindomain.id/apps想重定向到www.subdomain.maindomain.id/apps/login

但是当我尝试刷新时，出现 404。 （ 文件未找到。 ）

我和其他人试过

location = /apps/ {
#   try_files $uri $uri/ /apps/dist/index.html;
#   alias /apps/dist/index.html;
  return 301 /apps/dist/index.php;
}

location /apps/dist/ {
    try_files $uri $uri/ index.php;
}
location @rewrites {
        rewrite ^.*$ /index.html last;
}

我仍然在刷新时得到 404

这就是我的完整配置

如果我将模式更改为 hash

mode: 'hash',

我的页面可以刷新但有#

Answer 1

我认为您需要在 nginx 中将“/apps/login”重定向到“/apps”。

对于 Vue，只有一个页面，即根页面（其余页面由 js 生成）。 尽管您看到 /apps/login，但 /apps/login.html 或 /apps/login.php 实际上并不存在。 换句话说，找不到文件 /apps/dist/login.php（在您的情况下， nginx run:try_files $uri $uri/ index.php; ）。 因此，它返回 404。

就个人而言，我不建议使用历史记录。 为这些类似情况建立重定向路径太笨拙了。 如果您不想处理，请使用 hash 模式并在 Vue 中使用路由 function。