CODEWITHSUNDEEP
vue.jsvue-cli
user11139426
user11139426

Reputation:

Vue Router not working once production is built

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.

Upvotes: 8

Views: 9871

Answers (2)

Venkatesh A
Venkatesh A

Reputation: 2504

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

Upvotes: 0

Decade Moon
Decade Moon

Reputation: 34306

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',

Upvotes: 7

Related Questions