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.

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)
});

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
– Alex, Commented Mar 2, 2018 at 16:29
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
– Sbu, Commented Dec 21, 2020 at 8:01

xneg · Accepted Answer · 2018-07-25 09:02:14Z

10

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.

edited Jul 25, 2018 at 9:02

answered Jun 21, 2018 at 15:27

xneg

1,3901 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aswzen Over a year ago

this one works perfectly, especially on this line try_files $uri $uri/ /index.html; which is the most important

span Over a year ago

I don't get it. The try_files is exactly the same as in the original question. What is going on?

Alex · Accepted Answer · 2018-03-02 16:33:35Z

4

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.

answered Mar 2, 2018 at 16:33

Alex

1911 gold badge1 silver badge9 bronze badges

Comments

Bruno Frare · Accepted Answer · 2021-03-30 12:35:50Z

4

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
}

answered Mar 30, 2021 at 12:35

Bruno Frare

412 bronze badges

Comments

Cody Gray · Accepted Answer · 2020-12-23 15:12:54Z

3

Got to: /etc/nginx/sites-enabled
Open the config for your domain

add the following code under 'root'

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

save the file
restart your nginx server with command: /etc/init.d/nginx restart
Refresh browser

edited Dec 23, 2020 at 15:12

Cody Gray♦

246k53 gold badges513 silver badges591 bronze badges

answered Jul 28, 2020 at 17:10

Muhammad Waqas

5616 silver badges11 bronze badges

2 Comments

Sbu Over a year ago

This does not solve the problem at all. It looks like a copy paste of how to configure nginx "getting started"...

Fjohn Over a year ago

this is a good answer because of the addition of index.html in the location line.

Vincent Guyard · Accepted Answer · 2022-04-21 03:36:12Z

1

In my case try_files didn't work, probably because another nginx is over my app nginx, using proxy_pass. I had to use 404 error rewriting:

server {
    listen ${NGINX_PORT} ssl;
    server_name ${NGINX_HOST};
    ssl_certificate ${NGINX_SSL_CERTIFICATE};
    ssl_certificate_key ${NGINX_SSL_CERTIFICATE_KEY};
    error_page 404 =200 /index.html;
    location / {
        root ${NGINX_ROOT_LOCATION};
        index  index.html;
        include  /etc/nginx/mime.types;
    }
}

answered Apr 21, 2022 at 3:36

Vincent Guyard

4244 silver badges11 bronze badges

2 Comments

Sandwich Over a year ago

Which nginx was this in? Assuming you were still using proxy_pass I assume this is your app nginx config?

Vincent Guyard Over a year ago

@Sandwich this is docker container with docker image nginx:stable-alpine

Fazel Kazempour · Accepted Answer · 2021-02-10 13:17:21Z

0

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

Got to: /etc/nginx/sites-enabled
Open default config file
add this line before location for 404 redirect:

error_page 404 /;

save the file and don't forget to restart nginx

answered Feb 10, 2021 at 13:17

Fazel Kazempour

1

Comments

Jorge Cardenas · Accepted Answer · 2021-11-09 20:47:10Z

0

My suggestion is make sure you use the next line, as suggested in vue-router documentation. But, in addition, if you have multiple files to set your nginx server,for instance a file for setting the SSL of your server,please make sure to include it also in those files.

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

answered Nov 9, 2021 at 20:47

Jorge Cardenas

591 silver badge2 bronze badges

Comments

Jiu_Zou · Accepted Answer · 2024-12-23 06:11:50Z

In vue router 4 for vue3

first

try to find the mounted APP.vue, when you refresh the webpage, the App.vue will be loaded firstly. So make sure you don't mounted this.$router.push("/")

  mounted() {
     this.$router.push("/");
}

the correct thing

mounted() {
    this.loading();
},
methods: {
  loading() {
    if(document.URL=="http://localhost:9000/" || document.URL=="https://zoujiu.com.cn/"
          || document.URL=="http://zoujiu.com.cn/" || document.URL=="http://localhost:9000/#/"
          || document.URL=="http://zoujiu.com.cn/#/"|| document.URL=="https://zoujiu.com.cn/#/"
        ) {
          this.$router.push({ path: '/'});
        }
  }
}

deployment

I use this history with nginx ssl https

const router = createRouter({
  // history: createMemoryHistory(),
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes:constantRoutes,
})

development

I use this history

const router = createRouter({
  // history: createMemoryHistory(),
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes:constantRoutes,
})

this is myown website http://zoujiu.com.cn.

Collectives™ on Stack Overflow

vue-router, nginx and direct link

8 Answers 8

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

first

deployment

development

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

first

deployment

development

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related