web-dev-qa-db-fra.com

Itinéraires Vue.js desservant à partir du sous-répertoire

Je souhaite servir mon application Vue.js à partir d'un sous-répertoire sur un serveur de transfert. Par exemple: http://url.com/subdir/app/

En ce moment, si je fais cela et que je configure la configuration de la configuration assetsPublicPath pour servir à partir de ce dossier, tous les actifs sont bien servis mais mon application n'est pas acheminée correctement. La page "d'accueil" est routée vers le "fourre-tout", et tout autre itinéraire affiche simplement la page blanche normale 404.

Voici mon routeur:

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
            }
        ]
    }
]})

Et voici les modifications nécessaires de config/index.js: assetsPublicPath: '/subdir/app/'

Dans le développement local, les itinéraires fonctionnent bien. Mais sur le serveur de transfert, tous les actifs statiques, le JS et le CSS intégrés, etc., fonctionnent très bien. Cependant, l'itinéraire d'origine montre le fourre-tout. Je suppose que c'est parce que mes itinéraires ne sont pas configurés correctement ou parce que je dois faire quelque chose pour servir à partir d'un sous-répertoire en production.

javascriptvue.jsvue-router
11
Gurnzbot

La configuration assetsPublicPath est réservée aux ressources du webpack. Pour vue-router, vous devez définir l'option base dans le constructeur.

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

17
Matt

J'ai pu résoudre ce problème en utilisant la propriété base de vue-route. Dans le cas de l'exemple, cela ressemblerait à ceci:

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

Ma question est maintenant de savoir comment créer dynamiquement ce sous-répertoire. Imaginez un seul serveur et 2 URL différentes pointant vers ce serveur.

www.dominio / app1
www.dominio / app2
0
vidgarga