vue-router, nginx and direct link

Question

I\'m trying to setup a vue-router on my nginx server. The issue I\'m having is that my route doesn\'t work if I enter url directly to the browser myapp.com/mypath

Answer 1

I struggled for several hours solving the same problem. After all this config works for me:

events {
...
  http {
  ...
    server {
          listen       80;
          server_name  localhost;

          location / {
              root   /path/to/your/project/html;
              index  index.html index.htm;
              include  /etc/nginx/mime.types;
              try_files $uri $uri/ /index.html;
          }
    }
  }
}

I have almost the same router setup as you.

Answer 2

I've found 1 possible solution with the suggestion from a co-worker.

I'm now passing URI as a query parameter in nginx. So my config is now this:

location / {
    try_files $uri $uri/ /index.html?uri=$uri
}

Then in my router configuration in VueJS:

const routes = [
{
    path: '/',
    component: Landing,
    beforeEnter: (to, from, next) => {
        const { uri } = to.query;
        if (uri != null && uri != '/') {
            next(false);
            router.push(uri);
        } else {
            next();
        }
    }
}, ...

This seems to do the trick, although looks a bit dodgy.

Answer 3

1. Got to: /etc/nginx/sites-enabled

2. Open the config for your domain

3. add the following code under 'root'

   location / { try_files $uri $uri/ /index.html; }

4. save the file

5. restart your nginx server with command: /etc/init.d/nginx restart

6. Refresh browser

7. Pray for me :)