Setting a correct base url with vue-router

Get Help
#1

Hello,

I’ll dive right in:
My dist folder is uploaded to and has to be served from: https://www.mywebsite.com/xx/xx/myproject/index.html

The second you go to that url, it changes to:
https://www.mywebsite.com

So now when you refresh the page, you get the homepage instead.
Then I learned about the base property of the router and added 'xx/xx/myproject/' to it.
The result: https://www.mywebsite.com/xx/xx/myproject/

Progress! But that would still lead to unknown page on refresh, as it needs the /index.html at the end.
Then I thought, maybe I can just add it to the path itself. So this is the config I ended up with eventually

export default new Router({
    base: '/xx/xx/myproject/',
    mode: 'history',
    routes: [
       {
            path: '/index.html',
            name: 'timeline',
            component: Timeline
        },
        {
            path: '*',
            redirect: '/index.html'
        }
    ]
})

And to my surprise, this actually worked!
Though I’m very doubtful that this is the way to go, because while this is working in production, it does not in development (which is to be expected, really…). Having the same configuration locally and refreshing the page results in: Cannot GET /xx/xx/myproject/index.html

Would love to get an opinion of those who know better :slight_smile:
Thank you!

#2

This is a server-related question and will depend on the setup you have. Check out options for vue-router with different server configurations here.

I use apache with the base url option all the time by including the following code in my htaccess file

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

And setting the base url in vue-router like this:

const router = new VueRouter({
    // base: '/dev', // for dev
    base: '/', 
    mode: 'history',
    routes: [...]
});

The above code in conjunction with the .htaccess file produces a base url at http://someurl.com. When I am developing I use a different url at http://someurl.com/dev and then move the site over to the root url when its ready.

In your case the url will be different but the above setup should get the result you want.

2 Likes
#3

Ah I had a hunch it was going to be server related :slight_smile:
Sadly, it is the company’s server and I have no control over it whatsoever.

Thank you for your explanation!