Vue.js paths serving from a subdirectory

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

Right now, if I do this and configure configPublicPath to serve from this folder, all assets will be served fine, but my application will not route correctly. The home page is redirected to catch-all, and any further routes simply show a plain 404 white page.

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 are the necessary changes to config / index.js: assetsPublicPath: '/subdir/app/'

. , JS CSS .. . . , , - .

+4
1

assetsPublicPath webpack. vue-router base .

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

+5

Source: https://habr.com/ru/post/1676927/


All Articles