Vue.js 路由从子目录提供服务

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.

Answer 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

Answer 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