Vue Router with CFML (Lucee) server

I a have standard Vue Router - it works perfectly with the navigation like <router-link to="/test">test</router-link>, but when I'm trying to type the ULR to the browser like http://127.0.0.1:8889/test - it's reload the page and gives me 404 error.

As a server part I use CFML (Lucee).

Vue code - routes.js

import Home from './components/home.vue' 
import Test from './components/articleView.vue' 

export const routes = [     
{ path: '/', component: Home},     
{ path: '/test', component: Test} 
]

index.js

import { routes } from './routes'
Vue.use(VueRouter); 
const router = new VueRouter({   
mode:'history',   routes 
})

new Vue({     
el: '#app',     
router,     
render: h => h(App)   
})

Could you give me any hint where to dig?

Solution

You need to do a url rewrite configuration of your webserver, so that every loaded history route also points to your one and only vue app index file. Don't know the webserver you are using. But supposing your vue app index file is index.cfm in Tomcat that would be as follows:

#Let all static files load CSS,IMG,JS etc normally
RewriteCond %{REQUEST_URI} .*\.(cfc|cfm|map|css|js|html|png|jpg|jpeg|gif|txt|ttf|json|woff|ico)$ [OR]
RewriteRule ^(.*)$ - [L]

#Route everything else to index.cfm
RewriteRule ^(.*)$ /index.cfm$1 [L,QSA]