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:
Dynamic URL works locally but not hosted:
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
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!