vue-router, nginx and direct link
Solution 1
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.
Solution 2
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.
Solution 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
Solution 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
}
Related videos on Youtube
Alex
Updated on July 18, 2022Comments
-
Alex almost 2 years
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 andlocation
seems to only redirect to the index file. How can I redirect direct link ofmyapp.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) });
-
Sbu over 3 yearsThis does not solve the problem at all. It looks like a copy paste of how to configure nginx "getting started"...
-
Fjohn over 3 yearsthis is a good answer because of the addition of index.html in the location line.