title: vuejs nginx subdirectory deployment on refresh 404
body: <p>i have configure my nginx with these config</p>
  <pre><code>  location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
  
    location /apps/ {
      try_files $uri $uri/ index.php;
    }
  </code></pre>
  <p>my result of <code>npm run build</code> i was rename <code>mv dist apps</code></p>
  <p>the first router path <code>'/'</code> would redirect to <code>/login</code> path</p>
  <pre><code>const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior() {
      return { x: 0, y: 0 }
    },
    routes: [
      {
        path: '/',
        name: 'auth-login',
        component: () =&gt; import('@/views/pages/authentication/Login.vue'),
        meta: {
          layout: 'full',
          resource: 'Auth',
          redirectIfLoggedIn: true,
        },
      },
    ]
  </code></pre>
  <p>so when i going to <code>www.subdomain.maindomain.id/apps</code> would like redirect into <code>www.subdomain.maindomain.id/apps/login</code></p>
  <p>but when i tried refresh , 404 is appear. ( File not found. )</p>
  <p>i have was tried with other</p>
  <pre><code>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;
  }
  </code></pre>
  <p>still i got 404 on refresh</p>
  <p>and this my full config nginx <a href="https://gist.github.com/yogithesymbian/b137be9aa2adb87ac7652b9bfbf9394c" rel="nofollow noreferrer">https://gist.github.com/yogithesymbian/b137be9aa2adb87ac7652b9bfbf9394c</a></p>
  <p>if i change my mode to hash</p>
  <pre><code>mode: 'hash',
  </code></pre>
  <p>my page can be refresh but have <code>#</code></p>