Remove "#" from URL in Vue Router (Vue.js 2)

Question

My current URL is like domain/main.html#/ => This loads my home page

I want my URL to be free from '#' i.e. domain/main.html/

const router = new VueRouter({
    mode: 'history',
    routes,
)}

I read articles and answers on StackOverflow, youtube, etc and they all said the same thing that mode: 'history' would solve the issue and yes it does but my routes are not working. All of them are showing => Cannot GET domain/main.html/

I dug a little more and it says to catch the not found fallback using

{ path: '*', redirect: '/' }

I tried this but still not working.

{ path: '*', redirect: '/' }

but this time it opens my page but images and scripts are not loading this time, and if I reload again I get the same Cannot GET Error.

Any Help to solve this issue would be highly appreciated. Thanks in advance.

Answer 1

Your HTML file should be named index.html, so you have "domain.com/" and not "domain.com/main.html".

If you want to continue to use main.html as the HTML file name, you should config your server to respond always with that file.

But I suggest you rename the HTML file to index.html