vue-router, nginx and direct link

7
votes

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.

I've tried server configuration as described in the vue router docs as well as suggested similar configurations on stack overflow. My current nginx location configuration as follows: 

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

location /subscribe {
    proxy_pass http://127.0.0.1/subscribe // express API app
}

All that does is redirects any path to my root component (path: /) and not /mypath. This does make sense and location seems to only redirect to the index file. How can I redirect direct link of myapp.com/mypath to /mypath route in my VueJS app?

Here is how my vue routes setup now:

...
const routes = [
    { path: '/', component: Landing },
    { path: '/mypath', component: MyPath }
];

const router = new VueRouter({ mode: 'history', routes });

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});
5
nginxvue.jsvuejs2vue-router
Yeah, it's a typo here, but this isn't related to the issue I'm having. I've added this just in case, to show that I've got other location option there. I've corrected it now – Alex
Have you tried removing the $uri/ from the first location config ? I am using this (without even configuring any other location btw) and it seems to keep the /mypath appended. – Sbu

5 Answers

4
votes

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.

3
votes

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.

1
votes

  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

0
votes

well I had same problem so I tried to redirect every 404 errors to root url and it perfectly works.

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

  2. Open default config file

  3. add this line before location for 404 redirect:

    error_page 404 /;

save the file and don't forget to restart nginx

0
votes

Are you using a custom publicpath (mypath) in the vue.conf and the nginx?

If so, you need to change the configuration to match to that path.

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