8

My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore.

I've tried removing history mode, but this didn't work.

Vue Router

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import axios from 'axios' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/donate', name: 'donate', component: () => import('./views/Donate.vue') }, { path: '/guildselector', name: 'guildselector', meta: { requiresAuth: true }, component: () => import('./views/Guildselector.vue') }, { path: '/guild/:id', name: 'guild', meta: { requiresAuth: true, requiresAdmin: true }, component: () => import('./views/Guildpanel.vue') } ] }) export default router

MyWebsite.com/guildselector should show the Guildselector component for example, however I get a 

Not Found The requested URL /guildselector was not found on this server.

Only the donate page and landing page work.

Improve this question
2
  • Does it also work if you copy the dev deployed files over to your webserver? Commented Jul 2, 2019 at 13:18
  • Yep. Just the production build that doesn't work. Commented Jul 17, 2019 at 0:29

2 Answers 2

Reset to default
7

This is a very common problem; please read HTML5 History Mode in detail about how to configure your web server to host the files correctly.

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

Simple solution is just comment this line:

mode: 'history',
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

My Apache server has the exact same configuration as the one in that article. I'm not sure what else i'm supposed to do.
The Vue Router docs give you a chunk of Apache config, but don't tell you where to put it. I first tried adding a file in the Apache conf.d directory, but that didn't work. Then I made a .htaccess file in the web root. It still had no effect. Turns out that you need to look for the AllowOverride directive in the httpd.conf file and set it to something other than "None".
The mod_rewrite example from router.vuejs.org/guide/essentials/… wasn't working for me. But FallbackResource was doing the trick. I just created a .htaccess file with only a a single line: FallbackResource index.html and placing it in the same folder as my index.html. That fixed it.
0

For me - i was actually trying to get the app (vue3, vue-router4) on netlify. what fixed the issue for me was adding a rule file '_redirects' on the public folder. It needs to have the following

/* /index.html 200

This redirects all requests to the final built index.html file

Improve this answer

Comments