Dynamic routes in Vue-Router work in Development but not Deployment

Question

I've built a small single-page app in Vue using Vue-Cli and Vue-Router, and am using dynamic route matching as mentioned here[1]. Everything works fine during local development, but for some reason the dynamic pages/routes won't load after build (resulting in a 404 error). Other routes (the root page of my project, for example) work fine after build. I'm thinking this may be a webpack config issue.

Example:

Root URLS work:

localhost:8080/arbq/panel - works
mydomain.com/arbq/panel/ - works

Dynamic URL works locally but not hosted:

localhost:8080/arbq/panel/123 - works
mydomain.com/arbq/panel/123 - 404 Error (doesn't load)

Routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Controller from '@/components/Controller'
import Default from '@/components/Default'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    base: '/arbq/panel',
    routes: [
        {
            path: '/:id',
            name: 'controller',
            component: Controller
        },
        {
            path: '/',
            component: Default
        }
    ]
 })

From Webpack > Config > Index.js

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/arbq/panel/',

...

Please let me know if you see anything that might be preventing the route from being mapped appropriately, and thanks!

http [1]: https://router.vuejs.org/en/essentials/dynamic-matching.html

Juan Piza Ferra Juan Piza Ferra · Accepted Answer · 2018-03-08T21:48:47

You should check the vue-router history mode as it's explained on the page, you should check out HTML5 vue-router's page, you will need to configure your server or maybe change the mode of the vue-router to hash and this will work because this simulates the history mode by not refreshing the URL, i know it should be a comment but i can't post sorry. Hope this help you!

Dynamic routes in Vue-Router work in Development but not Deployment

1 Answers