Vue.js routes serving from subdirectory

Question

I would like to serve my Vue.js app from a subdirectory on a staging server. For example: http://url.com/subdir/app/

Right now if I do this and set up the build config assetsPublicPath to serve from that folder, all the assets are served fine but my app does not get routed correctly. The "home" page gets routed to the 'catch-all', and any further routes simply show the normal white-page 404.

Here is my router:

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/',
        component: ContentView,
        children: [
            {
                path: '/',
                name: 'DataTable',
                component: DataTable,
                meta: { requiresAuth: true }
            },

            // ===================================
            //  Login
            // ===================================
            {
                path: '/login',
                name: 'AppLogin',
                component: AppLogin,
                meta: { checkAlreadyLoggedIn: true }
            },
            {
                path: '/logout',
                name: 'AppLogout',
                component: AppLogout,
                meta: { requiresAuth: true }
            }
        ]
    },
    {
        path: '*',
        component: ContentView,
        children: [
            {
                path: '/',
                name: 'NotFound',
                component: NotFound
            }
        ]
    }
]})

And here is the necessary config/index.js changes: assetsPublicPath: '/subdir/app/'

In local development the routes work fine. But on the staging server all static assets, the built JS and CSS etc all serve fine. However the home route shows the catch-all. I am assuming it's because my routes are not set up correctly, or because I need to do something to serve from a subdirectory in production.

Solution 1

The assetsPublicPath config is just for webpack assets. For vue-router, you need to set the base option in the constructor.

See docs: https://router.vuejs.org/en/api/options.html#base

Solution 2

I have been able to solve this, using the base property of vue-route. In the case of the example it would look like this:

export default new Router({
    mode: 'history',
    base: '/subdir/app/',
    routes: [
    {
        path: '/',
        component: ContentView,
        children: [

My question now is how can I make this subdirectory dynamically. Imagine a single server, and 2 different urls pointing to this server.

www.dominio / app1
www.dominio / app2

Comments

[Gurnzbot]

Thank you! I checked the environment and set the base depending on that: base: process.env.environment === 'development' ? '/' : '/subdir/app/'

[Toskan]

so, why not a working example of what he should do? some cryptic documentation only? :S still +1

[lexa-b]

also, it's necessary to configure "publicPath" webpack param

[user5855178]

I have yet to see anyone offer a working sample of this issue. I ran into this issue just this week. That base option only gets you part way there.. there is no working sample for this online that i have seen thus far.

[Tassoman]

In my opinion is a better choice using the vue.config.js file as described in offy vue-cli docs

[Abraham Putra Prakasa]

Are you already get any hint for this matter? I also need dynamic multiple subfolder, but using only same one vue.js dist build. Thank you

[vidgarga]

I receive the base url by parameter: base: (req.getResponseHeader('root-base') == null ? '/' : req.getResponseHeader('root-base')) + 'p'

[jtalarico]

Sorry - new to more complex routing issues, so sorry if this is covered. Using base works just fine, but for hitting a route directly or even refreshing the browser on a route path that's not the root (or base) results in a 404. I'm guessing this is because the app won't load initially unless the root is hit first. Any workarounds or does there need to be a rewrite/redirect rule applied on the web server?

[Markus]

For router v4 (Vue3), you have to pass the base path to createWebHistory. This worked for me: ... history: createWebHistory(location.pathname), ...

[Markus]

try base: location.pathname,

[Danny Coulombe]

@Markus reply should be the accepted answer.